Jane
- Jane iframe
- Jane Headless
Ecommerce Event Tracking with Jane iframe
Fill in the
accountIdandsourceIdfields with your Surfside account ID and source ID respectively. These will be provided to you by your Surfside account manager.Add the code snippet below to the
<head></head>section of your website website to enable web and ecommerce event tracking with Jane iframe.
<script>
(function() {
var surf = document.createElement('script');
surf.setAttribute('src','//cdn.surfside.io/sdk/1.0.0/wave.js');
surf.setAttribute('type','text/javascript');
surf.setAttribute('id','surfside');
surf.setAttribute('accountId','XXXXX');
surf.setAttribute('sourceId','XXXXX');
surf.setAttribute('platform','iheartjane');
var sync = document.createElement('img');
sync.setAttribute('src','//edge.surfside.io/id/uid?');
sync.setAttribute('height','1');
sync.setAttribute('width','1');
sync.setAttribute('display','none');
document.head.appendChild(surf,sync);
})();
</script>
Ecommerce Event Tracking with Jane Headless
To enable ecommerce event tracking for your Jane Headless website, follow the steps below. This setup consists of two key components:
- GTM (Google Tag Manager) Container Setup
- DataLayer Implementation
GTM Container Setup
Create a GTM Account
- Go to Google Tag Manager and sign in.
- Set up a new container for your Jane Headless website.
Install the GTM Container
- Follow the Google Tag Manager Installation Guide to add the GTM container code to your website.
- Ensure the GTM snippets are placed:
- Head snippet: Inside the
<head>tag. - Body snippet: Immediately after the opening
<body>tag.
- Head snippet: Inside the
Add
support@surfside.ioas a user with "Publish" permissions to your GTM account.
DataLayer Implementation
Follow the GTM DataLayer implementation guide to add the required dataLayer variables and triggers for ecommerce event tracking.
Necessary Ecommerce DataLayer Variables:
view_item- Indicates that a product was viewed, documentation can be found hereadd_to_cart- Indicates that a product was added to the cart, documentation can be found hereremove_from_cart- Indicates that a product was removed from the cart, documentation can be found herebegin_checkout- Indicates that the checkout process has begun, documentation can be found herepurchase- Indicates that a purchase has been made, documentation can be found here
Once the GTM container and DataLayer variables are set up, let your Surfside Account Manager know and the Surfside Team will handle the rest!