Supine documentation

Technical support & implementation manual.

Implementation

The Supine implementation is done using a snippet of JavaScript code that allows you to track visitor activity on your website. The documentation will help you step-by-step how to correctly implement Supine functionality.

1. Base code

Placement: on every page

Please use code that has been generated especially for your website. Login into your account and click on the "Tracking" link in main navigation.

<script src="https://supine.io/scripts/7e5c768f16b25541db71cdfed5ac44824e9f1797/tracker.js" type="text/javascript"></script>
<script>
  if (typeof SupineTracker !== 'undefined') {
    var supineTracker = SupineTrackerInitializer.getInstance("7e5c768f16b25541db71cdfed5ac44824e9f1797", "yourwebsite.com", "https://backend.supine.io", {
      retargetingCallbacks: {

        //platforms code here
        //Please use code that has been generated especially for your website. 
        //Login into your account and click on the "Tracking" link in main navigation.

      }
    });
  }

  //setting parameters page type or product price
  //...

  //after everything is set, send all the info into supine
  supineTracker.run();  
</script>

2. Conversion code

Placement: on "thank you" / purchase page
Allowed values (revenue): float or integer
Allowed values (transactionId): string
Both parameters are mandatory.
Timing: This code must be triggered after the Base code above.
Please make sure, that after refreshing the page this code is not trigger again == deduplication needed.

<script>
  supineTracker.addConversion({'revenue': 199.99, 'transactionId': 'ABCD123456789'});
  supineTracker.run(); 
</script>

3. Additional code

3.1. Page type

Description: set a page type for actual page load
Placement: on every page
Allowed values: 'home', 'product', 'category', 'search', 'cart', 'purchase', 'other'
Timing: This code must be triggered after the Base code above.

<script>
  supineTracker.setPageType('product');
</script>

3.2. Product price

Description: set a product price of actual product on page
Placement: on product detail page
Allowed values: float or integer
Timing: This code must be triggered after the Base code above.

<script>        
  supineTracker.setProductPrice(4567.99);
</script>

3.3. Add to cart

Description: trigger this event after product was added to cart
Placement: on product, category or search page type
Timing: This code must be triggered after the Base code above.

<script>    
  supineTracker.addToCartEvent();
  supineTracker.run(); 
</script>

Full example in GTM

Note: this setup might little bit differ from your GTM setup.

1. Base code with with parameters setters

GTM trigger: All pages

<script src="https://supine.io/scripts/7e5c768f16b25541db71cdfed5ac44824e9f1797/tracker.js" type="text/javascript"></script>
<script>
  if (typeof SupineTracker !== 'undefined') {
    var supineTracker = SupineTrackerInitializer.getInstance("7e5c768f16b25541db71cdfed5ac44824e9f1797", "yourwebsite.com", "https://backend.supine.io", {
      retargetingCallbacks: {
        fb: function() {
          dataLayer.push({'event':'fbGoRetargeting'});
        }, 
        adw: function() {
          dataLayer.push({'event':'adwGoRetargeting'});          
        }
      }
    });
  }

  //setting page type on every page
  supineTracker.setPageType({{supine page type}});

  //setting product price
  if({{supine page type}} == 'product'){
      supineTracker.setProductPrice({{Product price}});
  }

  //setting conversion on "thank you" page
  if({{supine page type}} == 'purchase'){
      supineTracker.addConversion({'revenue': 199.99, 'transactionId': 'ABCD123456789'});
  }

  //send everything to Supine
  supineTracker.run(); 

</script>

2. Add to cart event

GTM trigger: Add to cart
Timing: This code must be triggered after the Base code above. Use "Tag Sequencing" in GTM to make sure the order is correct.

<script>
  //sending "Add to cart" event
  supineTracker.addToCartEvent();
  supineTracker.run();  
</script>

3. Setup retargeting tags

In this example in part no. 1, there are defined two events 'event':'fbGoRetargeting' and 'event':'adwGoRetargeting'.
Now assign trigger for each tag in your GTM, that represents retargeing code. In this case event fbGoRetargeting will trigger Facebook retargeting code, and another trigger for AdWords (event adwGoRetargeting).