Re: How to use GTM with Shopify web pixel extension?

How to use GTM with Shopify web pixel extension?

devPramod
Shopify Partner
22 0 13

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,
     });
  });

});
Replies 10 (10)

phester17
Shopify Partner
22 1 10

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.

phester17
Shopify Partner
22 1 10

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.

phester17
Shopify Partner
22 1 10

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
Shopify Partner
3 0 0
I'm having the same problem as well, have you found any solutions?
phester17
Shopify Partner
22 1 10

@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. "

lynth
Shopify Partner
78 3 6

Ok, but do you know how to implement it without liquid references? Also, is it possible to do it like the Analyzify app does?

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!

saumo_pal
Shopify Partner
2 0 0

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.

allysonc66
Shopify Partner
1 0 0

What do you mean by "push to this variable"?

saumo_pal
Shopify Partner
2 0 0

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.

lynth
Shopify Partner
78 3 6

So, what can I do with the web pixel app then? 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!