# How to integrate with GTM & GA4

Please follow these steps:

1. [**Enable the app embed first**](#id-1.-enable-the-app-embed-first)
2. [**Get GTM Container ID**](#id-1.-get-gtm-container-id)
3. [**Get GA4 Tracking ID**](#id-2.-get-ga4-tracking-id)
4. [**Manage tracking events**](#id-3.-select-tracking-events)
5. [**Configure the app script to the Checkout page**](#id-4.-configure-the-app-script-to-the-checkout-page)
6. [**Check the app working**](#id-5.-check-the-app-is-working)

{% embed url="<https://www.youtube.com/watch?v=Nk-jNFEluB4>" %}

### 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'.

<figure><img src="/files/zFOYudrjuY4MvEkGYdQD" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mbkzQIuva1mVJLTlv7MN" alt=""><figcaption></figcaption></figure>

### 2. Get GTM Container ID

For creating a new Google Tag Manager account yet, please check out [this document.](https://www.youtube.com/watch?v=P4suvDuj0kI)

<details>

<summary>Find Container name and ID</summary>

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

</details>

<figure><img src="/files/7nzqW1Bw67Lg0gkxA1aH" alt=""><figcaption></figcaption></figure>

<details>

<summary>Find GTM Container In on your workspace homepage</summary>

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

</details>

<figure><img src="/files/M5y17xOu31ynRkSuklp9" alt=""><figcaption><p>Find GTM Container In on your workspace homepage</p></figcaption></figure>

### **3. Get GA4 Tracking ID**

For a new Google Analytics 4 account, please check out [this document.](https://www.youtube.com/watch?v=ybK-VUAxZ_8)

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

<figure><img src="/files/Hrq83UCVHZz1Rn1UUuUi" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/obfcB5sE8ddKeaWvqeIk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ThanauU2ji7KabukgL9J" alt=""><figcaption></figcaption></figure>

### 4. Select tracking events

<figure><img src="/files/TDk0LXYnmkeLYO39iuuL" alt=""><figcaption></figcaption></figure>

### 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”

{% embed url="<https://www.youtube.com/watch?v=vhbLOyvl3Jo>" %}

#### 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.&#x20;

{% embed url="<https://www.youtube.com/watch?v=1Qc_JNxhY7o>" %}

### 6. Check the app is working

After completing all the above settings, you can install [**Google Tag Assistant**](https://tagassistant.google.com/) to check if the app is working

{% embed url="<https://www.youtube.com/watch?v=O0jvfUGpFbY>" %}

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

<figure><img src="/files/Ie6TvmGaQd8sbcKeYcJ3" alt=""><figcaption></figcaption></figure>

2. Click Enable\
   Once you click enable, you’ll notice that the popup changes, but nothing else really
3. 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
4. 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)**

![](https://www.propellernet.co.uk/wp-content/uploads/2020/02/green2.png)

Everything is working as expected and you have no issues

**Blue (Slight Grimace)**

![](https://www.propellernet.co.uk/wp-content/uploads/2020/02/blue2.png)\
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)**

![](https://www.propellernet.co.uk/wp-content/uploads/2020/02/yellow2.png)

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

**Red (Sad Face)**

![](https://www.propellernet.co.uk/wp-content/uploads/2020/02/red2.png)

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

If you need any support, please contact us via email at [**upcommerce.contact@gmail.com**](mailto:undefined)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://upcommerce-help-center.gitbook.io/uptag-help-center/how-to-integrate-with-gtm-and-ga4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.