If your store already implements Google Tag Manager, you can save time by adding our SDK to your store using GTM instead of embedding it directly in your server-side templates.

The following variables must be defined in your GTM data layer before embedding our SDK:

Variable	Purpose	Page Availability
clientKey	Purpose - Identifies your site on Quicklizard Value - Your site's domain name, without www and . (dot) characters.	Product / Payment Confirmation
productId	Purpose - Unique product identifier Value - A globally-available string used to identify your product uniquely within your store Notes - Value depends on your business type. Please refer to the relevant document for more information	Product / Payment Confirmation
shelfPrice	Purpose - Product shelf price Value - The product's shelf price as seen by the user on your product page	Product
salePrice	Purpose - Used by Quicklizard to calculate revenue Value - The final sale price of each sold product, after checkout	Payment Confirmation

Step 1 - Define variables in your GTM data layer

Product Page Variables

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'clientKey':  'CLIENT_KEY',  // <--- replace with your clientKey
    'productId':  'PRODUCT_ID',  // <--- replace with value of productId
    'shelfPrice': 'SHELF_PRICE'  // <--- replace with value of shelfPrice
  }]);
</script>

Payment Confirmation Page Variables

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'clientKey':  'CLIENT_KEY',  // <--- replace with your clientKey
    'productId':  'PRODUCT_ID',  // <--- replace with value of productId
    'salePrice':  'SALE_PRICE'   // <--- replace with value of salePrice
  }]);
</script>

Step 2 - Add SDK embed code to GTM

Product Page Embed Code

<script>
  window.QLAsync = function(QL){
    var clientKey = '{{clientKey}}',
        productId = '{{productId}}',
        shelfPrice = '{{shelfPrice}}',
        permalink = self.location.href;
    QL.init(clientKey);
    QL.sendProductEvent(productId, {
      price: parseFloat(shelfPrice, 10),
      permalink: permalink
    });
  }
</script>
<script src="//d3jdlwnuo8nsnr.cloudfront.net/sdk/v3.0/ql.js"></script>

Payment Confirmation Page Embed Code

<script>
  window.QLAsync = function(QL){
    var clientKey = '{{clientKey}}',
        productId = '{{productId}}',
        salePrice = '{{salePrice}}',
        units     = '{{soldUnits}}';
    QL.init(clientKey);
    QL.sendConfirmationEvent(productId, {
      price: parseFloat(salePrice, 10),
      units: parseInt(units, 10)
    });
  }
</script>
<script src="//d3jdlwnuo8nsnr.cloudfront.net/sdk/v3.0/ql.js"></script>

Step 3 - Define GTM triggers

With your data layer variables defined, and SDK embed code snippets in place, you must now define triggers in GTM to add the relevant snippets to the product and payment confirmation pages respectively.

Please follow GTM triggers (opens new window) documentation to ensure each SDK snippet is correctly added to the right page on your store.