How to integrate with GTM & GA4

Please follow these steps:

1. Enable the app embed first

2. Get GTM Container ID

3. Get GA4 Tracking ID

4. Manage tracking events

5. Configure the app script to the Checkout page

6. Check the app working

1. Enable the app embed first

UpTag will not display on your store until you enable the app embed. Please go to your Shopify theme editor then turn on UpTag app in the App embeds section and click 'SAVE'.

2. Get GTM Container ID

For creating a new Google Tag Manager account yet, please check out this document.

Find Container name and ID

Go to your Tag Manager Accounts manager > Find the Container name and the associated ID formatted as "GTM-XXXXXX"

Find GTM Container In on your workspace homepage

Go to a GTM workspace > Get the GTM Container ID in the top-right formatted as "GTM-XXXXXX"

Find GTM Container In on your workspace homepage

3. Get GA4 Tracking ID

For a new Google Analytics 4 account, please check out this document.

To get your Google Analytics 4 tracking ID, please follow these steps:

• Go to your Analytics account > Open Admin > Find Data Streams in the column Property

• Click to open Data Streams > Get your GA4 Measurement ID

4. Select tracking events

5. Configure the app script to the Checkout page

4.1. Add the checkout script for the Checkout Extensibility

Go to the Shopify Settings > Copy the tracking code on the app and add the section “Custom events”

4.2. Add the checkout script on the Status Page

(Applied if your store have not switched to the extensibility checkout)

Open your Shopify Admin > Go to the Checkout folder > Paste the script at Order status page.

6. Check the app is working

After completing all the above settings, you can install Google Tag Assistant to check if the app is working

1. Enable Tag Assistant Click on that little blue smiley icon and a new popup will appear with 2 main options, Enable and Record:

1. Click Enable Once you click enable, you’ll notice that the popup changes, but nothing else really

2. Refresh your page If you have Google tags on that page, the little smiley face will change to a number, this is the number of tags you have

3. Look to see which tags are firing When you click on the Tag Assistant Icon, the pop-up will then show you which tags are running

What do the different Colours mean in Google Tag Assistant?

When you see your tags in Tag Assistant, you’ll see that the icon changes depending on if there are any issues or not. The face also goes from a smiling face to a grimace, which I presume is meant to be cute, but actually looks it was designed by children. This is what the colors mean:

Green (Smiley Face)

Everything is working as expected and you have no issues

Blue (Slight Grimace)

This means its working, but there’s a non-standard implementation error on it. This is normally fine, and your tags should work, but worth checking out. As an FYI, this will always be shown for Google Analytics when it’s being fired through GTM, as the standard implantation is code on the site. Don’t worry though, this is fine.

Yellow (Tongue sticking out)

Another implementation error. The tag will probably work, but the data might not be correct. Definitely check it out.

Red (Sad Face)

Major error. The tag won’t work, you need to fix this asap.

If you need any support, please contact us via email at [e-mail]