Issue with triggering data layer using Shopify.analytics.publish after migration from dataLayer.push

Issue with triggering data layer using Shopify.analytics.publish after migration from dataLayer.push

Matei86
Excursionist
27 0 5

Hello Shopify community,

 

I'm facing a challenge while migrating from dataLayer.push to Shopify.analytics.publish for custom pixel tracking, following the new guidelines provided by Shopify.

 

The original script in my theme.liquid file was:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'user_type': {% if customer %}'User'{% else %}'Guest'{% endif %},
    'store_country': '{{ localization.country.iso_code }}',
    'currency': '{{ localization.country.currency.iso_code }}',
  });
</script>

 

Based on the documentation, I replaced this with the following:

<script>
  const customData = {
    'user_type': {% if customer %}'User'{% else %}'Guest'{% endif %},
    'store_country': '{{ localization.country.iso_code }}',
    'currency': '{{ localization.country.currency.iso_code }}'
  };

  Shopify.analytics.publish('custom_user_data', customData);
</script>

And I've added the subscription to the custom event in my custom pixel code:

analytics.subscribe('custom_user_data', (event) => {
  window.dataLayer.push({
    'event': 'custom_user_data',
    'user_type': event.customData.user_type,
    'store_country': event.customData.store_country,
    'currency': event.customData.currency,
  });
});

However, the data layer is not being triggered when the event is published. I've checked for any errors and made sure that the custom pixel code is correctly placed, but the issue persists.

I'm wondering if anyone in the community has encountered a similar problem or if there's something I may have overlooked in the migration process. Any help or advice on how to resolve this would be greatly appreciated.

 

Thanks!

Replies 6 (6)

Sam_Mahmud
Shopify Partner
295 9 15

You can use this datalayer for tracking purchase and customer info

 

 

add payment info and purchase event in the datalayer.pngPurchase datalayer in customer events.png

Your COFFEE TIP! Can Create something incredible!
Require Assistance with website design or enhanced conversion tracking Via Google Tag Manager GTM ?
sam.analyst4@gmail.com! or WhatsApp!
Solved? accept it as solution with like
Matei86
Excursionist
27 0 5

Hi Sam,

 

Thanks for your response and the screenshots provided. I understand the importance of tracking purchase and customer information, and I have already implemented the GA4 formatted ecommerce data layers, including user data on checkout and purchase events.

However, I'm looking to integrate additional user data parameters (such as user ID, locale, etc.) into the GA4 Configuration tag at the page view level, across all pages of the website. This is crucial for my analytics strategy, as I aim to segment user behavior based on locale and other user-specific data points.

The challenge I'm facing is replicating the functionality of a custom pixel that was previously triggered on all pages via dataLayer.push. With the transition to Shopify.analytics.publish, I need to ensure that this user data is still captured with every page view event and is available for all GA4 events, not just for purchases.

Could you please guide me on how to properly trigger a custom pixel or event that includes these user parameters on all pages, before any other data layers?

 

I appreciate your help!

thebigcagency
Shopify Partner
16 0 6

On first glance the code looks correct to me.

  • On which page did you implement this?
  • How do you validate this? (You usually cannot access the datalayer variables  within the customer events iframe)

Just as another point of investigation: Maybe your custom event data is available to late for other events to pick up on it. If you wanted to measure purchases with your customer data you might have to create a trigger group for the purchase and customer_user_data to wait for it all to be available.

You may want to use a console.log statement in analytics.subscribe for the data to be correct. 

Web: https://thebigc-agency.de | LinkedIn: https://www.linkedin.com/in/christophkleine/
Please mark as solution if my comment was able to help with your problem.
Matei86
Excursionist
27 0 5

Hi Thebigcagency,

 

Thanks for taking the time to look over the code and for your suggestions!

 

To provide more context, the data layers were implemented at the top of the <head> section within the theme.liquid file, ensuring they are present on all pages of the site. The aim is to maintain this level of visibility with the transition to custom pixels.

 

For validation, I've been using the Test mode in Shopify's custom pixels and a Chrome plugin called dataSlayer, which allows visibility over the sandboxed data layers. Additionally, I've utilized Tag Assistant Legacy for verification, as recommended by Shopify's documentation. Despite these efforts, the data layers are not being triggered as expected.

 

I've successfully added customer data to the purchase data layer, and it's functioning correctly on the thank you page, highlighted in yellow:

Matei86_2-1720816788487.png

 

However, my objective is to have customer and locale data triggered on all pages, not just the thank you page.

The segmentation by country is particularly important because each locale currently has a separate data stream in GA4. The data separation method relies on the 'store_country': '{{ localization.country.iso_code }}' data layer parameter, which needs to be triggered on every page view.

 

I'm looking for a way to ensure that the same customer and locale data available on the purchase event is also available for all other events across the site.

 

Any further insights or guidance you can provide would be greatly appreciated.

Matei86
Excursionist
27 0 5

Bumping this, is there any way to pull the store's country / locale intro a custom pixel parameter? I haven't seen any such parameter in official docs.

DNagy
Visitor
1 0 0

Hi @Matei86

What all the 'expert' replies and the documentation fails to mention is that you need open the console and change the JS context.

https://www.reddit.com/r/GoogleTagManager/comments/1fjd07p/how_to_see_datalayer_sent_through_custome...

DNagy_0-1729180895429.png

On the store I am working on I had to randomly select a web-pixel-sandbox until I got the right one since the code shopify uses for the customer pixel are not listed in the actual customer pixel section but I tested it and at least the number doesn't seem to change 

DNagy_1-1729181028793.png

I hope this helps with your debugging