Google Tag Manger (GTM) Cheatsheet
How to Implement Basic website event tracking with Google Tag Manger, Sharing Access
Add google tag to Google Tag Manger
To add a Google Analytics 4 (GA4) tag to Google Tag Manager (GTM), follow these steps: Step-by-Step Guide:
Sign in to Google Tag Manager:
Go to tagmanager.google.com and sign in with your Google account.
Create a New Tag:
In the Workspace, click on “Tags” in the left-hand menu. Click “New” to create a new tag.
Configure Your GA4 Tag:
Click on “Tag Configuration”. Choose “Google Analytics: GA4 Configuration”.
Enter Your GA4 Measurement ID:
In the Measurement ID field, enter the GA4 Measurement ID. You can find this ID in your Google Analytics 4 property by going to: Admin → Data Streams → Select your web stream → Copy the Measurement ID (it starts with G-).
Set Up Triggering:
Click on “Triggering”. Choose the trigger when the tag should fire. Typically, you’d choose “All Pages” to track across your entire website.
Save Your Tag:
After selecting the trigger, click “Save” to complete the tag setup.
Publish Your Changes:
Once you’ve configured the tag, click “Submit” in the top-right corner of Google Tag Manager. Add a description if necessary, then click “Publish” to push the changes live.
Test Your Tag:
Use the Preview mode in Google Tag Manager to test that the tag is firing correctly on your site. You can also check the Realtime report in your GA4 account to ensure data is being collected properly.
Create Google Tag
Google tag is a required tag to send events from gtm to ga4 The Google tag establishes the data flow from your website to Google Analytics and other destinations you might have set. Create one Google tag per domain and place it on every site that you want to measure.
If you don’t have this tag then events like click tel and mailto will not fire to ga4
The google tag is a connector between GTM and GA4
Create the Google Tag
In GTM,
- Go to tag add new
- Give it a name.. A nice convention for adding this tag is
Google tag configuration - example.com
- Add the tag, from the “sliding draw” hit
google tag
.
Adding the Measurement ID
Measurement ID can be found in GA.
- In google analytics
- Hit the
admin
button in the bottom left - Open
data collection and modifications
- Click
data streams
- Click the
web
tab - Click your data stream (which probably is labeled the same as your website address)
- Find and copy
measurement id
- Add event name
gtm_ga4_data
, this is up to you.
Paste the Measurement ID
Paste the Measurement ID
from GA into the Tag id
field in GTM.
This is what you should have.
Add Trigger
- Add Trigger
- choose
Initialization - All Pages
Click Save
.
Tracking form submissions with visibility element
Prerequistes
- Google Analytics installed on your gtm
- Google tag added to your GTM
Get your Success Message
We are going to use your form success message as the element visibility trigger
. As soon as the browser renders the form success message (which is hidden by default and only visible after the form is submitted) that is when we track it as a conversion.
- You can target the success message by
id
orcss selector
so you want to check the html wrapper of the success msg and copy that.
In my case my success message html is:
1
2
3
4
5
6
<div
class="some-form-class"
id="gform_confirmation_message_1"
>
<p>Thanks for contacting us! We will be in touch with you shortly.</p>
</div>
I’m going to use the id from the above wpforms-confirmation-1109
. When that id is visible on the page, then the Trigger will fire.
Add Trigger
- Select the element
visibility tag
Choose id or css selector
from drop down method selector.
Add Element ID
- Ensure to use the
.
for the.css_selector
, when targeting ids just the text is required. - Paste in the id or css value of the success message html wrapper
- Select Once per page
- Select
minimum percent visible
to be1
- As the message will be a “new” appearence on the screen select
observe dom changes
Use class ID for best practice
using css class can have performance hit.
Confine test to Specific page
Set trigger to fire on some visibility events
.
Page URL equals https://example.com/your-page
.
Preview Changes
- Enter URL where form is, test the form submission and see if the
element visibility
event was Triggered.
Attach the trigger to tag
Create a Tag
- Add New Tag
- Call it same name as the trigger
Add the following to create your tag
- Google analytics
- GA4
- Add
measurement id
- Add event name of
generate_lead
When then event is sent google tag manager also sends the page url which is important for working out which page form was submitted on you can see these pages in pages and screens
and then filter by key event
Please Note: the form submission event must be marked as a key event in Google Analytics (GA).
Select Trigger
- Select your visibility Trigger you created earlier
- Save
Can I have Multiple Triggers?
If you have multiple forms you can have multiple triggers using a unique id for each form. Just keep adding more triggers. In Google analytics you can see which form was submitted.
Preview Test
- Hit Preview
- Fillout your form
- In tag manager debugger window
- Hit element visibility event in sidebar
- Check your form submission tag was fired.
Submit your changes.
If everything worked in the preview submit your changes.
More Info
Tracking Phone clicks
Add a Google Tag
This only needs to be done once in your gtm and you can reuse it for all events The Google tag establishes the data flow from your website to Google Analytics and other destinations
Add Click Variables
This only needs to be done once in your gtm and you can reuse it for all click events
Go to Variables
- Click
configure
in top right - Scroll down to
clicks
To ensure we have the required Variables enabled in GTM we need to add the ones we need for the click tel
.
- For tracking phone clicks, we just need to add the
Click URL
from the “click” section of variables. - Scroll down and enable the
Click URL
by checking the check box. - Then click Add
Add Triggers
- Call it
phone_click
- Click -
just links
. Some link clicks
.CLICK URL
containstel:
- Save
Create a Phone click Tag
- Go to
Tags
- Click
New
tag - Call it
phone_click
- Tag configuration
- Choose
Google Analytics
- Choose
Google Analytics: GA4 Event
- Add
GA4 Measurement ID
- event name
generate_lead
Your tag should be able to locate the google tag you created earlier. If your tag cannot find the google tag. then your missing your google tag and you still need to add it. Creating a google tag
Get Measurement ID
Now you need to go to Google Analytics instead of tag manager. Frustrating? Absolutely! So open a new tab and start loading up the Google Analytics account for the client your working for.
- In Admin, under
Data collection and modification
, clickData streams
. - Select the Web tab.
- Click the
web data stream
. - Find the
Measurement ID
in the first row of the stream details.
Now you need to back to tag manager and add in the measurement id.
Add Event Name
phone_click
Add Trigger To Tag
- Choose your
phone
trigger you created earlier - Hit save
Preview
- hit preview
- add url
View the data sent from GTM in GA4
- Login to Google Analytics
- Click Engagement
- Click Events
- if users have interacted with your site by clicking the click tel then you will see that event in GA4
More resources
Where to find the Google Tag Manger Integration code
Prerequisites
You have a google tag manager account
Go to tag manager
Locate your ‘container’
The thing you want to locate is refered to as a ‘container’ which is a bit confusing. Anyhow this is what your looking for.
tagmanager container
Get the code
- Hit the cog wheel
- Then hit the install tag manager option.
install tag manager code
Copy the code
Now you have the code appear. Ready to be copied to your website.
Cant find your container?
Ensure your logged in as the correct google user
GTM Access
Dont know who the owner of a Google Tag Manger (GTM) account is?
** Audit User Permissions: ** Check the users listed on the Google Analytics (GA) account. The creator of the Google Tag Manger (GTM) is probably also listed as an admin on the Google Analytics (GA) account.
How to share access to Google Tag Manger (GTM)
Login at https://tagmanager.google.com
Go to Admin
See screenshot https://share.cleanshot.com/vt8W9sDv
Go to User Management
See screenshot https://share.cleanshot.com/m6zyCXT5
Add user from the forthcoming slideout screen
Why store scripts in Google Tag Manger?
- No developer required
- If you rebuild your site, Just add the 1 Google Tag Manger Script back into your site and thats it. ALl your 3rd party integrations have been carried across to your new site.
- no login to website required