Shopify app: set session custom dimensions

Data collection and tags
1

Hello,

I have installed the Piwik PRO app on a Shopify shop. Everything works fine, and I understand how to send custom events: the documentation is clear. :slight_smile:

That said, I wonder if it’s possible to define a custom session dimension with this configuration. Perhaps via code injection into the theme’s liquid files, or via a custom pixel?

Or do I have to use the other method, which is manually installing the tracking code via a custom pixel?

Thanks in advance!

2

I think I’ve found a workaround.

I’ve inserted the following code to the <head> of the theme.liquid file:

<script>
(function waitForShopifyAnalytics() {
 if (sessionStorage.getItem('pp_custom_dimensions_sent')) return;

  const urlParams = new URLSearchParams(window.location.search);

 const adgroup_id = urlParams.get('adgroup_id');
 const ad_id = urlParams.get('ad_id');
 const meta_platform = urlParams.get('meta_platform');
 const meta_placement = urlParams.get('meta_placement');

  const dimensions = {};
 if (adgroup_id) dimensions[3] = adgroup_id;
 if (ad_id) dimensions[4] = ad_id;
 if (meta_platform) dimensions[5] = meta_platform;
 if (meta_placement) dimensions[6] = meta_placement;

  if (Object.keys(dimensions).length === 0) return;

  const interval = setInterval(() => {
 if (window.Shopify?.analytics?.publish) {
 Shopify.analytics.publish('piwik_pro_trackEvent', {
 category: 'Session Info',
 action: 'Init',
 name: 'Initial session dimensions',
 dimensions: dimensions
 });

      sessionStorage.setItem('pp_custom_dimensions_sent', 'true');
 clearInterval(interval);
 }
  }, 200);
})();
</script>

This script captures adgroup_id, ad_id, meta_platform, and meta_placement from the URL parameters, and sends them as custom dimensions once per session using a custom event (piwik_pro_trackEvent).

Since Shopify.analytics.publish() may not be available immediately when the page loads, the script uses a polling mechanism (setInterval) to wait until it’s ready. Once the event is sent, it stores a flag in sessionStorage to prevent multiple sends during the same session.

It’s injected into the theme.liquid file (just before </head>), so it executes on every page load, but only sends the event once per session — as early as possible.

Session dimensions appear as defined in the tracking debugger:

image
image363×627 35.8 KB

It seems to work, but a custom event is needed, which adds to the hits consumption…

So I’d be interested in another solution if there is one.

Thanks!

1 Like
3

Quick update!

I initially injected the script above into theme.liquid to push custom session dimensions using Shopify.analytics.publish(). However, I encountered a race condition: the event was being sent before the official Piwik PRO page view (triggered by the Shopify Piwik PRO app), which prevented proper attribution and caused data inconsistencies.

To solve this, I migrated to a custom pixel that waits for the analytics.subscribe('page_viewed') trigger. This guarantees that dimensions are sent after the official page view, ensuring correct session linkage. It also makes the setup more robust and easier to control.

Here is the custom pixel:

analytics.subscribe('page_viewed', async (event) => {
  if (sessionStorage.getItem('pp_custom_dimensions_sent')) return;

  const urlParams = new URLSearchParams(window.location.search);

  const adgroup_id = urlParams.get('adgroup_id');
  const ad_id = urlParams.get('ad_id');
  const meta_platform = urlParams.get('meta_platform');
  const meta_placement = urlParams.get('meta_placement');

  const dimensions = {};
  if (adgroup_id) dimensions[3] = adgroup_id;
  if (ad_id) dimensions[4] = ad_id;
  if (meta_platform) dimensions[5] = meta_platform;
  if (meta_placement) dimensions[6] = meta_placement;

  if (Object.keys(dimensions).length === 0) return;

  const bodyParams = new URLSearchParams({
    idsite: 'x',
    rec: '1',
    e_c: 'Session Info',
    e_a: 'Init',
    e_n: 'Initial session dimensions',
    url: window.location.href,
    action_name: document.title,
    rand: Math.random().toString().slice(2)
  });

  for (const [key, value] of Object.entries(dimensions)) {
    bodyParams.append(`dimension${key}`, value);
  }

  fetch('https://x.piwik.pro/ppms.php', {
    method: 'POST',
    mode: 'no-cors',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: bodyParams.toString()
  });

  console.log('📡 Piwik PRO - dimensions sent via POST/ppms', dimensions);
  sessionStorage.setItem('pp_custom_dimensions_sent', 'true');
});
1 Like