Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
You can use this datalayer for tracking purchase and customer info
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!
On first glance the code looks correct to me.
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.
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:
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.
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.
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.
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
I hope this helps with your debugging
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024