"i only speak liquid" #22: Jailbreaking Customer Events ⛓️

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Jean-Philippe Allard) share learnings we face daily. This is my first of 4 editions!

PS: I'm a developer on Storetasker; Apply here if you want to join Storetasker's gated network of vetted Shopify developers.

What I've been thinking about

I’m an analytics bum. It’s probably what I like to do the most! You can bet I was excited when Shopify announced Customer Events. Finally! I thought. No more DOM scraping and finicky template hacks that need to be tweaked for every theme. I’ll be able to create one script to rule them all, I thought.

Eagerly, I went on the Customer Events page, set-up a GTM script on the “all_events” event just to test things out, plugged everything in excitedly and… nothing. Nothing was firing at all. I was pretty bummed, so I dived in the docs a bit further. Ah, I discovered, those cool events are sandboxed. No luck on getting an easy win there.

Not one to quit, I went deep in the rabbit hole, and tried a million ways to get those sweet sweet events out of their cage, each more hacky than the next. Then I stumbled on the holy grail: postMessage. It’s built specifically for communicating data between windows, sandboxed iframes being one of those use cases.

While this method is not officially supported by Shopify, it uses a well documented function, so it should be fairly safe to use.

Add this to theme.liquid and checkout additional scripts:

And create a custom pixel with this:

What's going to happen with this is that the complete event data for every customer event will be sent over as a JSON string, which will trigger a dataLayer.push event on the main window, that you can use however you'd like. You'll be able to set-up custom out of the customer event names, parse the data coming from customer events, etc.

This is the basic code that you should tweak for your needs. For example, you might need to structure the data according to GA4 schema. In that case, you could structure it within the Customer Events code block, to send a clean JSON object to catch on the main window. Or you could keep the "raw" object coming from Customer Events, and organize it on the main Window using GTM. It's your choice!

3 links you can't miss

1. https://stape.io/ - Server side GTM on easy mode. Get an sGTM container running in minutes, at a cheaper price than using Google Cloud Platform. They even have a Shopify app to fire webhooks for purchases and refunds!

2. Feedarmy - How to add Enhanced Conversions on Google Ads using gtag.js. This helps improve conversion tracking, which in theory improves the targeting algorithm for automated bid strategies.

3. Simo Ahava - The ultimate guide to setting up GA4 using GTM. This is your bible if you want to use the code I shared above to create your own custom GA4 implementation!

One app I like

Sliderule Analytics. Want to get an awesome tracking set-up in a few clicks, for free? This is your solution. In my experience, it's better than the new native integration, available within the Google channel since early March. It will fit 95% of merchants analytics needs, using 5% of the effort.

One learning as a freelancer

Gaining the trust of your clients is your #1 job. Even if you're a fantastic developer, a genius marketer, or the most creative designer, you'll never succeed without trust.

In my experience, a less obvious way to gain trust comes from being 100% honest about what you're thinking, and not being afraid to say things that might not be what the client wants to hear. The client pays for your advice and experience, so keeping something for yourself fearing it might hurt the client is doing him a disservice.

Obviously, there's a way and a time to tell things earnestly. It needs to be told in a constructive and non-judgmental way, and you also need to listen to the clients' response intently. Your opinion might change when you hear about the context. There might be a piece of information you were missing!

Apart from sharing your honest opinion in an open and constructive way, the obvious way to gain trust is to be reliable. Don't drop balls. Set expectations clearly. Communicate setbacks. Do what's best for the client.

Hope this edition will be useful for you!

Until next ti

Jean-Philippe