Skip to main content
Skip table of contents

*Google Tag Manager (client-side)

Overview

This guide explains how to integrate Google Tag Manager (GTM) to track page views and order completions on your retail site. Note, this is not for server-side GTM (sGTM); a separate guide is available for that.

You'll set up tags and triggers in GTM to capture these events and send the data to the Symbiosys event server via HTTP GET requests. Data can be collected using Data Layer variables, JavaScript variables, or dynamically generated values.

Instructions

Determine API Key and Endpoint

Contact a Symbiosys integration engineer to obtain your API key. Use the endpoint https://event.symbiosys.ai in the examples below. For Europe-based retailers, replace this with https://eu.event.symbiosys.ai.

Set Up the Page Views Tag

  1. Create a Tag:

    1. In GTM, go to the Tags tab and click “New”.

    2. Name the tag, e.g., “Symbiosys – Page View”.

    3. In the ‘Tag Configuration’ section, select “Custom HTML” as the tag type.

  1. Add the Action:

    1. Consult the Event Data Requirements section for information on requested parameters.

    2. Add the below Page View tracking code snippet to the template.

    3. Change any reference to CAPITALIZED_VARIABLE to the name of your data layer variable.

CODE 
<script>
    (function() {
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' 
            + name 
            + '=([^&#]*)');
            var results = regex.exec(location.search);
            if (!results)
                return ''
            return decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    
        var prodid = '';
        var crmid = '';
        var sid = '';
        var vid = '';
        var gclid = getUrlParameter('gclid');
        var fbclid = getUrlParameter('fbclid');
        var cclid = gclid || fbclid || '';
        var ch = gclid ? 'google' : fbclid ? 'meta' : '';
        var ccmp_id = gclid ? getUrlParameter('utm_campaign') : fbclid ? getUrlParameter('campaign_id') : ''
    
        var prodid_match = /products\/(\d+)/.exec(document.location.href);
    
        if (prodid_match && prodid_match[1]) {
            prodid = prodid_match[1]
        }
    
        if (typeof dataLayer !== 'undefined' && typeof dataLayer === "object" && dataLayer !== null) {
    
            // change CAPITILIZED placeholders to the name of your data layer variable

            if (dataLayer.VISITOR_ID) {
                vid = dataLayer.VISITOR_ID
            }
    
            if (dataLayer.CRM_ID) {
                crmid = dataLayer.CRM_ID
            }
    
            if (dataLayer.SESSION_ID) {
                sid = dataLayer.SESSION_ID
            }
        }
    
        if (!vid) {
            return;
        }
    
        var img = new Image();
        img.src = 'https://event.symbiosys.ai/page_viewjs'
        + '?ts=' + Date.now()
        + '&ch=' + encodeURIComponent(ch)
        + '&cclid=' + encodeURIComponent(cclid)
        + '&sid=' + encodeURIComponent(sid)
        + '&vid=' + encodeURIComponent(vid) 
        + '&crmid=' + encodeURIComponent(crmid)
        + '&uaclid=false'
        + '&prodid=' + encodeURIComponent(prodid)
        + '&ccmp_id=' + encodeURIComponent(ccmp_id)
        + '&page_url=' + encodeURIComponent(document.location.href)
        + '&api_key=' + 'YOUR_SYMBIOSYS_PROVIDED_KEY';
        document.body.appendChild(img);
    })()
</script>

  1. Add a Trigger:

    1. In the tag setup, click “Triggering”.

    2. Click “+” to add a new trigger.

    3. Select “Page View” as the trigger type to fire the tag on every page view.

    4. Save the trigger and link it to the Page View Tag.

Set Up the Orders Tag

  1. Create a Tag:

    1. In GTM, go to the Tags tab and click "New".  

    2. Name the tag, e.g., "Symbiosys – Order".

    3. In the ‘Tag Configuration’ section, select “Custom HTML” as the tag type.

  2. Add the Action:

    1. Consult the Event Data Requirements section for information on requested parameters.

    2. Add the below Page View tracking code snippet to the template.

    3. Change any reference to CAPITALIZED_VARIABLE to the name of your data layer variable.

CODE 
<script>
(function () {
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        if (!results) return '';
        return decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    var orderid = '';
    var prodid = '';
    var regunitpr = '';
    var disunitpr = '';
    var brand = '';
    var qty = '';
    var crmid = '';
    var sid = '';
    var vid = '';

    if (typeof dataLayer !== 'undefined' && typeof dataLayer === "object" && dataLayer !== null) {

        if (dataLayer.ORDER_ID) {
            orderid = dataLayer.ORDER_ID;
        }
        if (dataLayer.PRODUCT_IDS && Array.isArray(dataLayer.PRODUCT_IDS)) {
            prodid = dataLayer.PRODUCT_IDS.join("~");
        }
        if (dataLayer.PRODUCT_QUANTITIES && Array.isArray(dataLayer.PRODUCT_QUANTITIES)) {
            qty = dataLayer.PRODUCT_QUANTITIES.join("~");
        }
        if (dataLayer.PRODUCT_PRICES && Array.isArray(dataLayer.PRODUCT_PRICES)) {
            regunitpr = dataLayer.PRODUCT_PRICES.join("~");
        }

        // if no discount is applied, disunitpr should contain the regular unit prices
        disunitpr = regunitpr;

        // if item-level discounts are applied, and you have a data layer variable containing the final price paid per unit, uncomment the below and update accordingly
        // if (dataLayer.PRODUCT_PRICES_AFTER_DISCOUNTS && Array.isArray(dataLayer.PRODUCT_PRICES_AFTER_DISCOUNTS)) {
        //     disunitpr = dataLayer.PRODUCT_PRICES_AFTER_DISCOUNTS.join("~");
        // }

        // if your site offers order level discounts, and you have a data layer variable containing the discount value, uncomment the below and update accordingly
        if (dataLayer.ORDER_DISCOUNT_VALUE && dataLayer.ORDER_DISCOUNT_VALUE > 0) {
            var orderDiscountValue = dataLayer.ORDER_DISCOUNT_VALUE;
            var qtyArray = qty.split("~").map(Number);
            var regunitprArray = regunitpr.split("~").map(Number);

            var totalCost = qtyArray.reduce(function (sum, q, index) {
                return sum + (q * regunitprArray[index]);
            }, 0);

            var disunitprArray = regunitprArray.map(function (price, index) {
                var unitQty = qtyArray[index];
                var unitTotal = price * unitQty;
                var unitSavings = (unitTotal / totalCost) * orderDiscountValue;
                var discountedPrice = price - (unitSavings / unitQty);
                return discountedPrice.toFixed(2);
            });

            disunitpr = disunitprArray.join("~");
        }

        if (dataLayer.CRM_ID) {
            crmid = dataLayer.CRM_ID;
        }
        if (dataLayer.SESSION_ID) {
            sid = dataLayer.SESSION_ID;
        }
        if (dataLayer.VISITOR_ID) {
            vid = dataLayer.VISITOR_ID;
        }

        // if your site has multiple vendors selling the same brand, we may ask you to map the brand; reach out to your Symbiosys contact if unsure
        // if (dataLayer.BRAND) {
        //     brand = dataLayer.BRAND;
        // }
    }

    var img = new Image();
    img.src = 'https://event.symbiosys.ai/orderjs'
        + '?ts=' + Date.now()
        + '&sid=' + encodeURIComponent(sid)
        + '&vid=' + encodeURIComponent(vid)
        + '&crmid=' + encodeURIComponent(crmid)
        + '&oid=' + encodeURIComponent(orderid)
        + '&prodid=' + encodeURIComponent(prodid)
        + '&qty=' + encodeURIComponent(qty)
        + '&regunitpr=' + encodeURIComponent(regunitpr)
        + '&disunitpr=' + encodeURIComponent(disunitpr)
        + '&page_url=' + encodeURIComponent(document.location.href)
        + '&brand=' + encodeURIComponent(brand)
        + '&api_key=' + 'AIzaSyBTtuZWh_MoeAE602-lsdhM0og_fkSiNH4';

    // Ensure the DOM is ready before appending the image
    document.addEventListener('DOMContentLoaded', function () {
        document.body.appendChild(img);
    });
})();
</script>

  1. Add a Trigger:

    1. Option 1 – Based on the Order Confirmation Page

      1. Click "Triggering" in your tag setup.  

      2. Click "+" to add a new trigger.

      3. Choose "Page View" as the trigger type.

      4. Select "Some page views" in the trigger settings.

      5. Add a condition to check if the page URL contains a specific string (e.g., `/order-confirmation`).

    2. Option 2 – Based on a Custom JavaScript Event

      1. Click "Triggering" in your tag setup.  

      2. Click "+" to add a new trigger.  

      3. Choose "Custom Event" as the trigger type.

      4. Select "Some custom events" in the trigger settings.

      5. Add a condition for the specific custom event.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close