I'm try to use the shiny new customer events admin to create a custom pixel for our dataLayer/Google Tag Manager implementation.
Previously, our GTM script and custom dataLayer event scripts have all been included in our theme.
Here's the basic script I put together to test this approach, using this guide - https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial .
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
window.dataLayer = window.dataLayer || [];
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
'event': 'product_viewed',
'item_id': event.data.productVariant.sku,
'item_name': event.data.productVariant.product.title,
'price': event.data.productVariant.price.amount,
'currency': event.data.productVariant.price.currencyCode,
'item_brand': event.data.productVariant.product.vendor,
'product_title': event.data.productVariant.product.vendor,
});
console.log("product_viewed event pushed", dataLayer)
});The product_viewed event being subscribed to here fires. I'm logging out the dataLayer obj within the event method here, as this cannot be done within the browser console (I assume because of the 'Sandbox' environment). However, there's a problem.
As instructed, the GTM script is included at the top of the custom pixel, but GTM does not initialise properly when the script is included in a custom pixel in this way, rather than directly within the theme <head> . Tag Manager is not defined within in the theme, and any dataLayer properties pushed are not being picked up within the GTM admin.
Has anyone experienced any similar issues when trying to migrate to using a custom pixel for their site's event tracking?
