For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hello Shopify,
Can you please provide us with a fully working example with web pixel extension and GTM?
At the moment I am able to get the custom event in my web pixel code. but to send those data GTM. I am not able to do it.
I have tried below code:-
import {register} from '@shopify/web-pixels-extension'; register(async ({analytics, browser, settings, window, document}) => { (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('shipping_test_event',(event)=>{ console.log(event); window.dataLayer.push({ 'event': event.name, }); }); // subscribe to events analytics.subscribe('all_events', (event) => { window.dataLayer.push({ 'event': event.name, }); }); });
I am also looking for for guidance on using GTM with the Web Pixel extension. The docs are not clear and the tutorial is outdated. I wish someone would just post a working example on git.
Actually @devPramod I just came across this seconds after I posted that comment 😂
https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial
I'm reading through it now.. hopefully it will help.
Update: Absolute nothing that I've tried works.
import {register} from '@shopify/web-pixels-extension';
// ERROR: The creation of Web Pixel id "xxxxx" failed
// This does not work
// Did not find a head or body element to append the script
(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-XXXXXX');
register(async (api) => {
// This does not work
// getElementsByTagName is undefined
(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-XXXXXX');
api.analytics.subscribe("product_viewed", (event) => {
console.log(`product_viewed: ${event}`);
});
});
Does anyone have any guidance on how to install the GTM tag using the Web Pixel App Extension?
This example for the lax web pixel sandbox does not with in the app extension:
https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial
@Arnold-fang Our Shopify Launch Engineer told us that Web Pixels are not intended for GTM and that we should use Custom Pixels instead. Here's the information I received from them:
"I can confirm Custom Pixel is the method that supports GTM, the web pixel app method is intended for app developers to build and integrate their own 1st party pixels. "
Ok, but do you know how to implement it without liquid references? Also, is it possible to do it like the Analyzify app does?
I don't think the window object is at all available for access inside an app pixel. Do check the console logs which says window is not defined. For this, you can just import the script using var s = import(script_url) and then push to this variable.
What do you mean by "push to this variable"?
My bad
Since there are two ways to integrate a web pixel, one via app pixel and other via custom pixel.
The above example will only work for custom pixels.
For app pixels, this setup wont work. Ideally if we need to load the gtm script, we can load using var s = import(gtm_script_url)
But even that would fail, because gtm script requires window object which sadly isn't available in the app pixel sandbox. It is only available in the custom pixel sandbox.
So the end solution for this would be
1. Create a custom pixel and NOT an app pixel
2. Create your own pixel which pushes data to gtm through an api.
So, what can I do with the web pixel app then?