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:

VariablePurposePage 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 documentation to ensure each SDK snippet is correctly added to the right page on your store.