Tracking Your Shopify Products With Voluum

You require several things to be able to track your Shopify-powered store products with Voluum:

• An active Shopify account with:

  • A valid payment provider added,
  • A store created and products added,
  • Optionally, a custom domain set up.
  • Optionally, Shopify Plus subscription

• An active Voluum account, with a tracking domain that has an SSL certificate enabled.

  Voluum Note: Using an encrypted connection is a requirement in Shopify. If you do not have an SSL certificate enabled on your either dedicated or custom domain, conversion tracking will not work.

Once you have everything ready, proceed to the next step.

Shopify allows you to use many sales channels, which include:

• Online Store
• Facebook
• Google Shopping
• Other

In order for the tracking to work, you need to direct your visitors to your store through a Voluum campaign URL. If you fail to do so, no click ID value will be assigned, and no conversion tracking will be possible. You can submit this campaign URL manually to any source of traffic, such as various ad networks. Activation of this campaign URL will be counted as a visit in Voluum.

There are two methods you can use to track your Shopify store:

• A direct one, where you put Voluum tracking script directly on your store's page (main or product). This requires having Shopify Plus, as it allows adding codes to store pages. Create a campaign with just a Shopify offer and direct link to it. Put the offer tracking script on your store's page.
• An indirect one, where you direct your visitors from your sales channel to an external landing page with Voluum script in it and then from this landing page to your Shopify store's page. This does not require having Shopify Plus. Add a lander to Voluum and create a campaign with a lander. Put a lander tracking script on your landing page and then redirect visitors to your store's page.

To be able to create a complete campaign funnel in Voluum, you need to have offer elements added to Voluum, with links to product pages submitted as offer URLs.

1. In Voluum, go to Offers.

2. Click the Create button and select the Offer option from the drop-down menu.
   

   

3. In the New offer form, provide a name for the offer in the Offer name text field.
4. Paste a link to the product page in the Offer URL text field.

5. Click the Save button.
   

   

Repeat the steps above until you add all products as offer elements to Voluum.

Voluum Note: Due to open nature of Shopify infrastructure, we're unable to ensure that our app works in all configurations. Certain themes, apps or modifications might disrupt our integration.

Thanks to Voluum and Shopify integration, user can now:

• Map their Voluum offers with the specific Shopify products (with a use of Offer IDs)
• See 'add to cart' results for specific products in Voluum
• Track the purchases and the revenue.

In order to set up integration, follow the steps below:

1. Go to Shopify App Store and install Voluum app.
2. Go to Themes.
3. Click Customize.
   
   
4. Go to App embeds.
   
   
5. Enable Voluum app extension.
   
   
6. Go to Products tab and add offer IDs to your products. You can grab them from Voluum after enabling the 'Offer ID' column.
   
   
7. Now you have to create custom conversions for ‘Purchase’ and ‘AddToCart’ events in Voluum.The parameters for custom conversions are
   • purchase
   and
   • add_to_cart
   
   
8. Please also consider:
   • It is recommended for ‘AddToCart’ custom event to leave “Include in conversions” column option disabled - the column for ‘AddToCart’ will be added anyway in reports, but these won’t be included in overall conversions column (and overall conversions column will contain only actual purchases).
   • Note that each ‘AddToCart’ action will be firing a separate ‘add to cart’ conversion to Voluum.

Recently, Shopify has enabled its users to track custom events such as checkout_started, checkout_completed, and payment_info_submitted. The full list of events can be found here.

These events can be tracked in Voluum as Custom Conversions by adding our Conversion Tracking Script to the predefined code provided by Shopify. You can follow the steps below or watch a video.

1. Add Custom Conversion in Voluum for each event you wish to track.
   
   
2. Prepare Voluum Conversion Tracking Script
   • add et parameter and match it with the corresponding et parameter value taken from the Custom Conversion
   • for checkout_completed, you can also use a predefined checkoutTotalPrice variable to pass the order total value
   • exemplary Conversion Tracking Script with et and payout parameters:
     
     

(function(a,b,c){a= https://voluum_domain/conversion.js? cid=OPTIONAL& payout=${checkoutTotalPrice} &txid=OPTIONAL &et=checkout_com pleted;var d=b.createElement("script"),e=b.scripts[0];c=(b=b.cookie.match(/(^| )vl
cid=([^;]+)/))?b.pop():c.getItem("vl-cid-expires")&&+c.getItem("vl-cid-expires")>(new
Date).getTime()?c.getItem("vl-cid"):null;c&&(-1<a.indexOf("cid=")?a=a.replace(/cid=.*?
(&|$)/,"cid="+c+"&"):
(b=-1<a.indexOf("?")?"&":"?",a+=b+"cid="+c));d.src=a;e.parentNode.insertBefore(d,e)})
(window,document,localStorage);

3. Embed the edited Voluum Conversion Tracking Script into the predefined Shopify code taken from this site → selected event → Custom Pixel

The code extended with the Voluum Conversion Tracking Script should look like below. You can also find the complete script available here.

analytics.subscribe('checkout_completed', (event) => {
  // Example for accessing event data
  const checkout = event.data.checkout;

  const checkoutTotalPrice = checkout.totalPrice?.amount;

  const allDiscountCodes = checkout.discountApplications.map((discount) => {
    if (discount.type === 'DISCOUNT_CODE') {
      return discount.title;
    }
  });

  const firstItem = checkout.lineItems[0];

  const firstItemDiscountedValue = firstItem.discountAllocations[0]?.amount;

  const customItemPayload = {
    quantity: firstItem.quantity,
    title: firstItem.title,
    discount: firstItemDiscountedValue,
  };

  const paymentTransactions = event.data.checkout.transactions.map((transaction) => {
    return {
        paymentGateway: transaction.gateway,
        amount: transaction.amount,
      };
  });

  const payload = {
    event_name: event.name,
    event_data: {
      totalPrice: checkoutTotalPrice,
      discountCodesUsed: allDiscountCodes,
      firstItem: customItemPayload,
      paymentTransactions: paymentTransactions,
    },
  };

  // Example of Voluum Tracking Script
  (function(a,b,c){a=`https://voluum_domain.com/conversion.js?cid=OPTIONAL&payout=${checkoutTotalPrice}&txid=${order_id}&currency=${currency}&param1=${timestamp}&param2=${client_id}&et=purchase`;var d=b.createElement("script"),e=b.scripts[0];c=(b=b.cookie.match(RegExp("(^| )vl-cid=([^;]+)")))?b.pop():c.getItem("vl-cid-expires")&&+c.getItem("vl-cid-expires")>(new Date).getTime()?c.getItem("vl-cid"):null;c&&(-1<a.indexOf("cid=")?a=a.replace(/cid=.*?(&|$)/,"cid="+c+"&"):(b=-1<a.indexOf("?")?"&":"?",a+=b+"cid="+c));d.src=a;e.parentNode.insertBefore(d,e)})(window,document,localStorage);
  });
});

4. Add the edited code in Shopify → Settings → Customer events Pixels → Add custom pixel.
Paste the code and save changes.

CheckoutChamp is a funnel and checkout platform used by ecommerce advertisers who need more control over the buying flow than a native store checkout offers, including order bumps, one-time offers, upsell paths, and subscription billing. A common setup pairs it with Shopify, where Shopify hosts the offer page and CheckoutChamp hosts the checkout.

This combination splits the funnel across two domains. The visitor lands on your Shopify offer page, and the purchase event fires on CheckoutChamp. A first-party cookie created on the Shopify domain is not readable on the CheckoutChamp domain, so the Voluum click ID has to be carried across that boundary deliberately. Without it, the conversion reaches Voluum without attribution and you lose the link between the sale and the ad that produced it.

The following article covers how to create the click ID on Shopify, pass it to CheckoutChamp, store it again on the checkout domain, and report add-to-cart and purchase events back to Voluum through Google Tag Manager.

You require several things to be able to track a Shopify plus CheckoutChamp funnel with Voluum:

• An active Shopify account with a store, products added, and the offer page you intend to advertise. You also need the ability to add scripts to the page <head> section.
• An active CheckoutChamp account with the checkout funnel built, and permission to edit funnel settings.
• A Google Tag Manager container that you can edit and publish.
• An active Voluum account, with a tracking domain that has an SSL certificate enabled.
• Custom conversions created in Voluum for every event you want to report beyond the default conversion, for example add-to-cart or begin-checkout.

Voluum Note: Shopify custom pixels are not relevant in this scenario. They only see events that happen inside Shopify, and here the purchase happens on the CheckoutChamp domain.

Once you have everything ready, proceed to the next step.

Voluum creates the click ID when a visitor reaches your Shopify offer page through a Voluum campaign URL. The conversion, however, happens later and elsewhere, on CheckoutChamp. The click ID therefore has to travel with the visitor and come back to Voluum attached to the conversion request.

The tracking logic looks as follows:

1. The Voluum Campaign Tracking Script on the Shopify offer page creates the vl-cid first-party cookie holding the click ID value on the Shopify domain.
2. A script on the Shopify page reads vl-cid and appends it to your CheckoutChamp checkout links as the cid query parameter.
3. On CheckoutChamp, a script reads cid from the URL and saves it again as a vl-cid first-party cookie, this time on the checkout domain.
4. In Google Tag Manager, a 1st Party Cookie variable reads vl-cid so that tags can use the value.
5. CheckoutChamp events fire Voluum postback tags in GTM for add-to-cart, begin-checkout, and purchase.

Passing the click ID in the URL and recreating the cookie on CheckoutChamp is what preserves attribution across the two domains. The main implementation risk in this setup is not the Voluum postback itself, it is losing the click ID somewhere between the Shopify offer page and the CheckoutChamp checkout flow.

The campaign tracking script creates the vl-cid cookie with the Voluum click ID in the visitor's browser. Without it, nothing downstream has a value to pass.

1. In Voluum, open the offer that points to your Shopify page
2. In the Select conversion tracking method section, choose Script-based.
3. Add the {clickid} token to your Offer URL, matched with the parameter name your system expects, for example https://example.com/?click={clickid} and go to the Tracking tab.
   
   
4. Expand Install Campaign Tracking Script on the offer and copy the Voluum Campaign Tracking Script.
   
   
5. Paste the script into your Shopify offer page HTML, at the bottom of the <head> section, and save the changes.

To confirm the script works, open your offer page through a Voluum campaign URL, open your browser developer tools, and go to Application > Storage > Cookies. The vl-cid cookie should be listed for the Shopify domain.

In some cases it is useful to have the click ID ready in a variable, for example when your theme builds checkout links dynamically. The helper below reads the vl-cid cookie and stores its value.

<script>
function getVlCid(name) {
  const matches = document.cookie.match(new RegExp(
    '(?:^|; )' + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + '=([^;]*)'
  ));
  return matches ? decodeURIComponent(matches[1]) : null;
}
let vlmCid = getVlCid('vl-cid');
</script>

Once the vl-cid cookie exists on the Shopify page, the value has to reach the checkout page as the cid query parameter, in the form cid=click_id_value.

There are several ways to do this, depending on how your theme renders checkout links. The example below scans the page HTML and updates only the URLs that start with your CheckoutChamp checkout domain, including links added to the page after it loads.

Voluum Note: Replace https://CHECKOUT_PAGE_DOMAIN with your actual CheckoutChamp checkout domain and validate the behavior on your live funnel before publishing. If your theme generates checkout links in a different way, or the funnel uses a redirect between the offer page and the checkout, this method may not apply and the click ID should be passed another way.

<script>
(function () {
  var started = false;
  var checkInterval = setInterval(function () {
    var m = document.cookie.match(/(?:^|; )vl-cid=([^;]*)/);
    if (!m || started) return;

    started = true;
    clearInterval(checkInterval);

    function getCid() {
      var m = document.cookie.match(/(?:^|; )vl-cid=([^;]*)/);
      return m ? encodeURIComponent(decodeURIComponent(m[1])) : '';
    }

    function appendCid(url, cid) {
      if (!url || url.indexOf('https://CHECKOUT_PAGE_DOMAIN') !== 0) return url;
      if (/([?&])cid=/.test(url)) return url;
      var hash = '';
      var hashIndex = url.indexOf('#');
      if (hashIndex > -1) {
        hash = url.slice(hashIndex);
        url = url.slice(0, hashIndex);
      }
      return url + (url.indexOf('?') > -1 ? '&' : '?') + 'cid=' + cid + hash;
    }

    function processElement(el, cid) {
      if (!el || !el.attributes || !cid) return;
      for (var i = 0; i < el.attributes.length; i++) {
        var attr = el.attributes[i];
        var val = attr.value;
        var updated = appendCid(val, cid);
        if (updated !== val) {
          el.setAttribute(attr.name, updated);
        }
      }
    }

    function processNode(node) {
      if (!node || node.nodeType !== 1) return;
      var cid = getCid();
      if (!cid) return;
      processElement(node, cid);
      var els = node.querySelectorAll('*');
      for (var i = 0; i < els.length; i++) {
        processElement(els[i], cid);
      }
    }

    processNode(document.documentElement);

    new MutationObserver(function (mutations) {
      for (var i = 0; i < mutations.length; i++) {
        var m = mutations[i];
        if (m.type === 'attributes') {
          processElement(m.target, getCid());
        }
        if (m.type === 'childList') {
          for (var j = 0; j < m.addedNodes.length; j++) {
            processNode(m.addedNodes[j]);
          }
        }
      }
    }).observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true
    });
  }, 500);
})();
</script>

GTM is what lets you listen to CheckoutChamp events and fire Voluum postbacks from them.

1. In CheckoutChamp, open your funnel and go to Settings.
2. Select Tracking Pixels.
3. Open the Google Analytics 4 / Tag Manager tab.
4. Paste your GTM container ID, the one that starts with GTM-, into the container ID field.
5. Click Save & Continue and publish the funnel.

Persist the click ID on the checkout domain

The cid parameter is only present in the URL of the first checkout page. To keep the click ID available through the rest of the funnel, store it as a vl-cid first-party cookie on the CheckoutChamp domain.

Add the script below directly to the checkout page HTML, ideally in the <head> section, or deploy it through GTM as a Custom HTML tag with an Initialization trigger that fires when Page URL contains cid.

<script>
(function () {
  var cid = new URLSearchParams(window.location.search).get('cid');
  if (!cid) return;

  var d = new Date();
  d.setTime(d.getTime() + 180 * 24 * 60 * 60 * 1000);

  var cookie =
    'vl-cid=' + encodeURIComponent(cid) +
    '; expires=' + d.toUTCString() +
    '; path=/; SameSite=Lax';

  if (location.protocol === 'https:') cookie += '; Secure';

  document.cookie = cookie;
})();
</script>

Voluum Note: This script assumes the click ID arrives as a cid parameter appended on the Shopify side. If you use a different parameter name, a redirect sits between the offer page and the checkout, or the checkout domain changes, adjust the script accordingly and test it again.

Each event you want to see in Voluum needs a Custom Image tag in GTM that calls the Voluum S2S postback URL. Build the URL with the variable tokens that exist in your own container and map them to the matching Voluum parameters. You can read more about parameters in postback URLs.

Container setup itself is covered in Google Tag Manager Setup for Conversion Tracking Script. Two details are specific to this funnel: the click ID comes from a 1st Party Cookie variable pointing at the vl-cid cookie, and the purchase tag fires on the CheckoutChamp purchase event, whose exact name you can confirm in GTM Preview mode. If your funnel does not expose a reliable add-to-cart event, checkout page initialization with cid present in the URL can serve as a proxy, provided the funnel always requires a cart step first.

Add-to-cart or begin-checkout postback tag

https://your_voluum_domain/postback?cid={{vlm_clickid}}&txid={{OrderId}}&et=add_to_cart&param1={{vlm_atc_products}}

Purchase postback tag

https://your_voluum_domain/postback?cid={{vlm_clickid}}&payout={{vlm_value}}&txid={{vlm_transaction_id}}&et=purchase&param1={{vlm_item_name}}&param2={{vlm_item_quantity}}

The cid= parameter carries the click ID and is required for attribution. The payout, txid, and param1 to param5 parameters are optional, but they are what let you report revenue, order identifiers, and product-level detail alongside the conversion.

Voluum Note: The tokens above come from one specific container and are shown as examples. Always use the tokens that match the variables configured in your own GTM container.

Run the full funnel once before sending paid traffic to it, and check each handover point in order:

1. Open the Shopify offer page through a Voluum campaign URL and confirm that the vl-cid cookie is created on the Shopify domain.
2. Click through to the checkout and confirm that the CheckoutChamp URL contains cid= with your Voluum click ID.
3. On the checkout page, confirm that the vl-cid cookie is created from the cid URL parameter value.
4. Use GTM Preview mode to confirm that the cookie variable resolves before the add-to-cart and purchase postback tags fire.
5. Complete a test order and check that the purchase event carries the expected values, such as order value, transaction ID, item name, and item quantity.
6. Open the Conversions report in Voluum and confirm that the test conversion is attributed to the original click ID.

If a conversion arrives in Voluum without attribution, work backwards through the same list. In most cases the click ID was lost between the offer page and the checkout rather than in the postback itself.