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

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.

Add the Action:
1. Add your code snippet to track page views. The examples in the following section show two ways to implement the snippet.
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.

Custom HTML Code Snippets (see Event Data Requirements for all required parameters)

Option 1: Using Data Layer Variables

CODE

<script>
(function() {
    var img = new Image();
    img.src = 'https://event.symbiosys.ai/page_viewjs' +
              '?ts=' + Date.now() +
              '&ch=' + encodeURIComponent({{ReferrerChannel}}) +
              '&sid=' + encodeURIComponent({{PageViewSessionID}}) +
              '&vid=' + encodeURIComponent({{VisitorID}}) +
              '&crmid=' + encodeURIComponent({{CRMID}}) +
              '&aclid=' + encodeURIComponent({{ATTClickID}}) +
              '&uaclid=' + encodeURIComponent({{ShouldUseATT}}) +
              '&prodid=' + encodeURIComponent({{ProductID}}) +
              '&ccmp_id=' + encodeURIComponent({{CampaignID}}) +
              '&cclid=' + encodeURIComponent({{ChannelClickID}}) +
              '&page_url=' + encodeURIComponent(document.location.href) +
              '&api_key=' + 'SYMBIOSYS_PROVIDED_API_KEY';
    document.body.appendChild(img);
})();
</script>

Option 2: Dynamic Generation

CODE

<script>
(function() {
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }
    var channelClickID = getUrlParameter('gclid') || getUrlParameter('fbclid');
    var channel = getUrlParameter('gclid') ? 'google' : 'meta';
    var campaignID = getUrlParameter('utm_campaign');
    var productID = parseProductIdFromPath(document.location.href);
    var sessionID = {{PageViewSessionID}};
    var visitorID = {{VisitorID}};
    var crmID = {{CRMID}};

    var img = new Image();
    img.src = 'https://event.symbiosys.ai/page_viewjs' +
              '?ts=' + Date.now() +
              '&ch=' + encodeURIComponent(channel) +
              '&sid=' + encodeURIComponent(sessionID) +
              '&vid=' + encodeURIComponent(visitorID) +
              '&crmid=' + encodeURIComponent(crmID) +

              '&aclid=' + encodeURIComponent({{ATTClickID}}) +
              '&uaclid=false' +
              '&prodid=' + encodeURIComponent(productID) +
              '&ccmp_id=' + encodeURIComponent(campaignID) +
              '&page_url=' + encodeURIComponent(document.location.href) +
              '&api_key=' + 'SYMBIOSYS_PROVIDED_API_KEY';
    document.body.appendChild(img);
})();

Set Up the Orders Tag

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.
Add the Action:
1. Add your code snippet to track orders. The examples in the following section show two ways to implement the snippet.
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.

Custom HTML Code Snippets (see Event Data Requirements for all required parameters)

Option 1: Using Data Layer Variables

CODE

<script>
(function() {
    var img = new Image();
    img.src = 'https://event.symbiosys.ai/orderjs' +
              '?ts=' + Date.now() +
              '&sid=' + encodeURIComponent({{OrderSessionID}}) +
              '&vid=' + encodeURIComponent({{VisitorID}}) +
              '&crmid=' + encodeURIComponent({{CRMID}}) +
              '&oid=' + encodeURIComponent({{OrderID}}) +
              '&prodid=' + encodeURIComponent({{ProductID}}) +
              '&qty=' + encodeURIComponent({{Quantity}}) +
              '&regunitpr=' + encodeURIComponent({{RegularUnitPrice}}) +
              '&disunitpr=' + encodeURIComponent({{DiscountUnitPrice}}) +

                 '&page_url=' + encodeURIComponent(document.location.href) +

                 '&brand=' + encodeURIComponent({{Brand}}) +
              '&api_key=' + 'SYMBIOSYS_PROVIDED_API_KEY';
    document.body.appendChild(img);
})();
</script>

Option 2: Dynamic Generation

CODE

<script>
(function() {
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }
    var productID = parseProductIdFromPath(document.location.href);
    var sessionID = {{OrderSessionID}};
    var visitorID = {{VisitorID}};
    var crmID = {{CRMID}};
    var orderID = {{OrderID}};
    var quantity = getUrlParameter('qty') || 1;
    var regularUnitPrice = getUrlParameter('regunitpr') || 0.0;
    var discountUnitPrice = getUrlParameter('disunitpr') || 0.0;

    var img = new Image();
    img.src = 'https://event.symbiosys.ai/orderjs' +
              '?ts=' + Date.now() +
              '&sid=' + encodeURIComponent(sessionID) +
              '&vid=' + encodeURIComponent(visitorID) +
              '&crmid=' + encodeURIComponent(crmID) +
              '&oid=' + encodeURIComponent(orderID) +
              '&prodid=' + encodeURIComponent(productID) +
              '&qty=' + encodeURIComponent(quantity) +
              '&regunitpr=' + encodeURIComponent(regularUnitPrice) +
              '&disunitpr=' + encodeURIComponent(discountUnitPrice) +

                 '&page_url=' + encodeURIComponent(document.location.href) +

                 '&brand=' + encodeURIComponent({{Brand}}) +
              '&api_key=' + 'SYMBIOSYS_PROVIDED_API_KEY';
    document.body.appendChild(img);
})();
</script>