Implementing Upstack Data on WordPress via Google Tag Manager (GTM)

Install the Upstack Data Pixel on WordPress via Google Tag Manager (GTM) — set up a Custom HTML tag with your Pixel ID and trigger it on All Pages for site-wide event tracking.

---

Google Tag Manager Snippets for Upstack Data

To set up the Upstack Pixel using Google Tag Manager (GTM), you’ll instrument the relevant Upstack tags in your GTM container and populate the dynamic variables using GTM Variables (Data Layer or Custom JavaScript).

---

Prerequisites

• An Upstack Data account with the Upstack Data app installed on your Shopify store.

• Your Upstack Pixel ID (UUID format: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX, e.g., 58284d43-85f6-41fb-b2e0-f32f8ecb4e9b). See How to find my Upstack Data Pixel ID.

• Admin access to your Google Tag Manager container (container ID format: GTM-XXXXXXX) and the WordPress site where the GTM container is installed.

• The GTM container script already loaded on your WordPress site (via a plugin like Site Kit, GTM4WP, or a manual script in your theme).

• For e-commerce events, a Data Layer that exposes order/product details (WooCommerce-compatible plugins typically push these automatically).

---

Step 1: Find and copy your Upstack Pixel ID

Your Upstack Pixel ID is a unique identifier linked to your Shopify store. This ID is used to track browser events and associate them with your account.

For step-by-step instructions on locating your Upstack Pixel ID, see:

How to find my Upstack Data Pixel ID?

---

Step 2: 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 -->

Important:

• Replace XXXXXXXXXXXXXXXXX with the Pixel ID you obtained in Step 1 (UUID format: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX).

• Enter the Pixel ID exactly as provided — extra whitespace or quotation mismatches will break tracking.

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 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', {
    // Replace these sample values with your actual 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 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', {
    // Replace these sample values with your actual 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 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 (include 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 order 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,                       // total order value
    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 customer 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 3: Create the event tag in Google Tag Manager

• Sign in to Google Tag Manager and open your container.

• In the left sidebar, navigate to Tags → New.

• Select Custom HTML as the tag type.

• Paste the Upstack Data script template into the HTML editor.

---

Step 4: 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 5: Set up Data Layer variables (if required)

• If the script uses a dataLayer object, configure GTM variables (under Variables → New → Data Layer Variable) to pull in values.

• WordPress plugins like WooCommerce may already push dataLayer values for e-commerce actions — confirm in GTM Preview before adding new pushes.

---

Step 6: Preview & debug

• Use Google Tag Manager’s Preview / Debug mode (top-right of the GTM workspace) to test your implementation.

• Validate that each Upstack tag fires once per expected trigger and that the resolved Pixel ID matches yours.

---

Step 7: Publish your container

• Once everything looks correct in Preview, click Submit in the top-right of the GTM workspace, name the version, and click Publish.

• This will push the Upstack Data tracking live on your WordPress site.

---

Step 8: Verify events in the Upstack dashboard

• Visit your WordPress site and trigger each event you configured (page view, view content, add to cart, initiate checkout, purchase).

• Use the Upstack Data Pixel Helper to confirm each event fires with the expected parameters.

• In the Upstack dashboard under Event Health, confirm the events arrive against your Pixel ID and the parameters you configured (value, currency, items, identity fields).

---

Here’s our help article on ​**Health and Wellness Custom Event Mappings →**