Google Tag Manager Snippets for Upstack Data

Quick Summary

In order to setup Upstack Pixel using Google Tag Manager, it requires that you instrument the relevant Upstack tags and populate the dynamic variables using GTM tag variables.

Step 1: Javascript Snippets for Upstack Data

1. JS Head Tag Snippet loaded on every page


<!-- START Upstack Script Tag - This should be placed in the head of every page-->
<script src='https://prod2-cdn.upstackified.com/scripts/px/ups.min.js' async='true'></script>
<script>
  window._adqLoaded =0;
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
    window._upsqueue.push(arguments);
  }
  window._upstack('init', 'XXXXXXXXXXXXXXXXX') // Replace XXXXXXXXXXXXXXXXX with your Upstack Pixel ID
  window._upstack('page');
</script>
<!-- END Upstack Script Tag - This should be placed in the head of every page-->

2. Upstack View Content Event Javascript Snippet

<!-- View Content Event Template - The JSON values here are sample only and should be dynamically populated in code (liquid, GTM variables, or hardcoded) based on the product details -->

<script>  
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
   window._upsqueue.push(arguments);
  }
</script>

<script>
   window._upstack && window._upstack('track', 'view_content',
      {
        // The following fields are to be dynamically populated in code (liquid or hardcoded) based on the product details
        value: 100, // product price
        currency: 'USD', // currency
        items: [{
          id: '1234', // product id
          quantity: 1, // product quantity
          name: 'Product 1', // product name
          price: 100, // product price
          variant: '1234', //variant id
        }]
      })
</script>

3. Upstack Add to Cart Event Javascript Snippet

<!-- Add to Cart Event Template - The JSON values here are sample only and should be dynamically populated in code (liquid, GTM variables, or hardcoded) based on the product details-->
<script>  
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
   window._upsqueue.push(arguments);
  }
</script>

<script>
  window._upstack && window._upstack('track', 'add_to_cart',
     {
       // The following fields are to be dynamically populated in code (liquid or hardcoded) based on the product details
       value: 100, // product price
       currency: 'USD', // currency
       items: [{
         id: '1234', // product id
         quantity: 1, // product quantity
         name: 'Product 1', // product name
         price: 100, // product price
         variant: '1234', //variant id
       }]
     })
</script>

4. Upstack Initiate Checkout Event Javascript Snippet

<!-- Initiate Checkout Event Template - The JSON values here are sample only and should be dynamically populated in code (liquid, GTM variables, or hardcoded) based on the product details-->
<script>  
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
   window._upsqueue.push(arguments);
  }
</script>

<script>
  window._upstack && window._upstack('track', 'initiate_checkout',
     {
       value: 100,           // product price
       currency: 'USD',      // currency     
       items: [{
         id: '1234',         // product id
         quantity: 1,        // product quantity
         name: 'Product 1',  // product name
         price: 100,         // product price
         variant: '1234',    //variant id
       }],
       // the following are optional, but recommended as many as possible
       email: 'email here',         // customer email address
       phone: 'phone_number here',   // customer phone number
       firstName: 'first_name here', // customer first name
       lastName: 'last_name here',   // customer last name
        addresses: [{
         address1: 'address1 here',
         address2: 'address2 here',
         city: 'city here',
         province: 'province here',
         provinceCode: 'province_code here',
         zip: 'zip here',
         country: 'country here', 
         countryCode: 'country_code here',   
       }]
      });
</script>

5. Upstack Purchase Event Javascript Snippet

<!-- Purchase Event Template - The JSON values here are sample only and should be dynamically populated in code (liquid or hardcoded) based on the product details-->

<script>  
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
   window._upsqueue.push(arguments);
  }
</script>

<script>
  window._upstack && window._upstack('track', 'purchase', 
   {
       transactionId: 'unique_order_id', // transaction id or order id
       orderId: 'unique_order_id',       // order id
       orderName: 'order name',          //order name
       value: 100,           // product price
       currency: 'USD',      // currency     
       items: [{
         id: '1234',         // product id
         quantity: 1,        // product quantity
         name: 'Product 1',  // product name
         price: 100,         // product price
         variant: '1234',    //variant id
       }],
       email: 'email here',         // customer email address
       phone: 'phone_number here',   // customer phone number
       firstName: 'first_name here', // customer first name
       lastName: 'last_name here',   // customer last name
       addresses: [{
         address1: 'address1 here',
         address2: 'address2 here',
         city: 'city here',
         province: 'province here',
         provinceCode: 'province_code here',
         zip: 'zip here',
         country: 'country here', 
         countryCode: 'country_code here',   
       }]
      });
  

</script>

6. Upstack Lead Event Javascript Snippet

<!-- Lead Event Template - The JSON values here are sample only and should be dynamically populated in code (liquid or hardcoded) based on the product details-->

<script>  
  window._upsqueue = window._upsqueue || [];
  window._upstack = window._upstack || function () {
   window._upsqueue.push(arguments);
  }
</script>

<script>
  window._upstack && window._upstack('track', 'lead', 
   {    
       email: 'email here',         // customer email address
       phone: 'phone_number here',   // customer phone number
       firstName: 'first_name here', // customer first name
       lastName: 'last_name here',   // customer last name    
   });
</script>

Step 2: Create the Event Tag in Google Tag Manager

In Google Tag Manager → go to Tags → New
Select Custom HTML as the tag type
Paste the Upstack Data script template into the HTML editor

Step 3: Configure Triggering

Set up triggers to fire your tag on the relevant pages/events
- Example triggers:
  - All Pages
  - Page View on specific URLs
  - Click Triggers or Custom Events

Step 4: Set Up Data Layer Variables (If Required)

If the script uses a dataLayer object, configure GTM variables to pull in values
WordPress plugins (like WooCommerce) may already push dataLayer values for e-commerce actions