How to migrate GTM variables to custom pixels?

emalueg · ‎02-13-2024

We are migrating to creating Custom Pixels rather than some custom tags/trackers that we currently write with GTM, because checkout.liquid is soon going away.

I've read the documentation and understand the basics of how to migrate a GTM pixel to Shopify Custom Pixel.

However, I'm looking for some advice on how to replace the use of GTM variables that we populate as the customer navigates our website.

For example, the '{{variable}}' tokens in the Custom HTML tags.

I know i can access the Custom Pixel *event* properties, but some of this data is custom info pushed to GTM by earlier pages.
How do I get the data tucked in GTM?
Can I call to GTM from a separate Custom Pixel?
Do I need to tuck data into the datalayer and ensure it follows from page to page?
Is there a simple solution I'm missing?

ecbLR · ‎04-03-2024

Bumping this! Can someone from Shopify please confirm if it is necessary to migrate all GTM pixels to Shopify customer events?I'm seeing GTM tag code injected into the customer events iFrame that connects to our GTM container, but some pixels are fail due to CORS ( and other ) issues.

c_zagarskas · ‎06-10-2024

This is a huge problem...

and its not just GTM, its the entire GoogleShopping system and all the other tracking we need to do on the final conversion page.

I have spent the last 6 weeks pouring over the so called "custom pixel documentation" and my conclusion here is:

"We have a problem. This new system does not allow scripts to be embedded"

That means:

ALL Conversion scripts that rely on externally embedded JS will fail on the order confirmation page.

This includes, but is not limited to: GTM, Google Analytics, Conversion Events, FB/META api conversion events even the GoogleShopping Survey code can not be loaded...

As a DEV who has watched the Shopify system be degraded by poorly coded apps and other shenanigan's I understand why Shopify did this, intentionally. However... as a dev with several Shopify clients I also feel their pain.

The only way around this I can see is to tell people to upgrade to 2300mo Shopify Plus.

Here is the LINE:

If you need to embed an external Javascript on your checkout page...

I see no way to pull that off using the new Pixel system.

I am thinking the solution is simple and elegant:

We must WAIT for the OFFICIAL channel APPs to update their systems.

Google-Shopify APP must do the integration themselves and phase out their external scripts

FB/IG META Shopify APP must also do the same, to tap into the FB conversions API

TicTok and any other 3rd party integration (such as HotJar or Whale, or any of them)

must also follow suit.

I believe this is INTENTIONAL on Shopify's part.

However, I think that as dev's we are SOL and the situation is FUBAR.

Perhaps... rightly so.

Too many thieves in the "app ecosystem" putting bugs and vulnerabilities into Shopify stores.

Even just last month I found a client who had a theme that was "collecting" the email's from the front end and sending them to the "theme developer", basically harvestings people's information. Last year I saw scripts IN THEMES that were not loading, but were clearly designed to "try" to capture credit card numbers.

Alas...

This decision by shopify is simple:

Give up on injecting a JS file into the checkout page.

They are purposely locking that down to remain PCI compliant.

We must instead pressure GOOGLE to patch their official channel app.

for example:

https://support.google.com/google-ads/thread/277882275?authuser=2&hl=en&sjid=4123835932993297937-NC

https://community.shopify.com/c/shopify-discussions/how-do-we-install-google-merhcant-center-opt-in-...

c_zagarskas · ‎11-27-2024

Shopify has finally responded to this with a decent guide:

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

As you can see here they DO allow https://www.googletagmanager.com/gtm.js to be injected into the pixel.

But, I do not see any way for us to get other scripts in there, for example, we have a BADGE from GoogleMerchantCenter and an OPT_IN survey that require additional external script such as: https://apis.google.com/js/platform.js?onload=renderBadge

the new system prevents us from adding ratingBadgeContainer

We are currently testing to see if window.renderOptIn works, but so far it has not fired for any customers on checkout.

Hard to say if thats Google or Shopify.

Good news though: this works reasonably well: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

Important note:

the code on that page is FUBAR in my opinion.

Its as if they purposely put mistakes in there...

I dont know what THAT is, but I dont think it belongs in javascript arrays... lol [maybe I am wrong]