Post

Google Tag Manger (GTM) Cheatsheet

Configure gtm to track the important user events on your website.

Posted Updated
smooth sailing on clear blue ocean
smooth sailing on clear blue ocean
By Daniel Florido
15 min read

How to create a Google Tag Manger account

To create a Google Tag Manager (GTM) account, follow these steps:

  1. Sign in to Google Tag Manager
    • Use your Google account to sign in or create a new one if you don’t have it.
  2. Set Up Your GTM Account
    • Click on Create Account.
    • Account Name: Enter your business name or something descriptive.
    • Country: Choose your country from the dropdown.
  3. Set Up a Container
    • Container Name: Enter the name of the website or app you want to track.
    • Target Platform: Select the platform (Web, iOS, Android, AMP) where you’ll use GTM.
    • Click Create after filling in the container details.
  4. Accept GTM Terms of Service
    • Review and agree to the terms to proceed.
  5. Install GTM on Your Website
    • You’ll receive code snippets for your site after creating the container.
    • Copy and paste the provided codes:
    • One goes in the <head> section of your website.
    • The other goes immediately after the opening <body> tag.
  6. Verify Installation
    • Use the Preview Mode in GTM or a browser extension like Tag Assistant to confirm your tags are firing correctly.

After installation, you’re ready to start adding tags, triggers, and variables within your new GTM container. Let me know if you’d like more tips on getting started with tags and triggers!

How to Create a 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

The measurement ID is required to create the Google Tag. The measurement ID can be found in your the corresponding Google Analytics account.

  • In google analytics locate the GA property you wish to send data to from GTM.
  • 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.

View google instructions

Paste the Measurement ID from GA into the Tag id field in GTM.

tag configuration

This is what you should have.

tag configuration end result

Now the tag is created its time to add the trigger.

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 or css selector so you want to check the html wrapper of the success msg and copy that.

In my case my success message html is:

Its a really nice feature to have a custom id on each of your forms respectively

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 or class

  • Ensure to use the . for the .css_selector, when targeting ids just the text is required.
  • Paste in the id or css class value of the success message html wrapper
  • Select Once per page
  • Select minimum percent visible to be 1
  • As the message will be a “new” appearance on the screen select observe dom changes

Use the ID for best practice

Using css class can have performance hit and you will get a warning about this GTM. add specific id to form response message

visibility element trigger configuration

Confine trigger to Specific page

There is an option to confine your trigger to a certain page. Use this option if you are only interested in tracking form submissions from specific urls.

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.

element visibility option in sidebar menu

Now that the trigger is created, its time to create the tag.

Create a Tag

  • Add New Tag Call it same name as the trigger (this is my convention for keeping things organised) and use the following properties to finish creating your tag.

  • Google analytics
  • GA4
  • Add measurement id
  • Add event name of generate_lead

When the 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

more info

Tracking Phone clicks

Ensure you have already created your google tag as outlined in the start of the article.

Creating a google tag

Add Click Variables

To ensure we have the required Variables enabled in GTM we need to add the ones we need for the click tel.

  • Go to Variables
  • Click configure in top right
  • Scroll down to clicks
  • 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

enable click url variable

Now that the click variables have been enabled. Its time to start making triggers and tags.

Add Triggers

  • Call it phone_click
  • Click - just links.
  • Some link clicks.
  • CLICK URL contains tel:
  • Save

tag manager trigger configuration for tel clicks

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 phone click

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

img-description

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

more info

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.

img-description

tagmanager container

Get the code

  • Hit the cog wheel
  • Then hit the install tag manager option.

img-description

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

ie: account 1 account 2

Track site search with GTM

When your site does not use the q= query parameter.

Instead you have something like this example.com/index/search/contact then use following config in GTM

Go To Variables

  • create new variable called site search term
  • select regex table as variable type
  • select page path as the input variable
  • click add row
  • for the pattern ^/index/search/(.*) for the output $1 this pattern will store the value of the search in in the variable $1
  • save the variable.

Create a tag

to send search term to analytics

  • select tag config
  • ga4 event as the tag type
  • add measurement id
  • add event name view_search_results

Add event parameter to tag

  • add parameter named search_term
  • for the value select the variable you created earlier
  • now scroll down and select triggering

add the trigger

  • add trigger called search results
  • add page view which fires on some views.
  • select page path
  • select condition to matches regex
  • add ^/index/search/(.*) as the value (or whatever values your search result page uses)

The trigger ensures the event only fires on the search results page

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

Set Permissions

  • Check the Admin box under both Account Permissions and Container Permissions.
  • For Container Permissions, select Publish along with Read, Edit, and Approve to provide full access at the container level.

Add custom html script

Add a javascript snippet to your website to integrate a third party functionality.

Tags

  • Hit new
  • Configure tag
  • Create custom html tag called hotjar, wildjar, linkedin or facebook code
  • Paste script including script tags

Triggers

  • Create trigger to fire on all pages
  • Preview to check the tag is firing

test

  • In preview you should see tag firing

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

GTM trigger types

Page URL

In Google Tag Manager (GTM), the “Page URL” trigger is used to fire tags based on the URL of the page being viewed.

Click URL

In Google Tag Manager (GTM), the “Click URL” trigger is used to fire tags based on the URL of a clicked link or element.

you can combine page url and click url trigger to only track link clicks on specific page

Click Classes

In Google Tag Manager (GTM), the “Click Classes” trigger is used to fire tags based on the CSS classes of the clicked element.

Click Element

In Google Tag Manager (GTM), the “Click Element” trigger is used to fire tags based on interactions with specific elements on your webpage. This trigger allows for a high level of specificity, enabling you to track clicks on virtually any HTML element. Here’s how to use and set up a Click Element trigger:

Click Text

In Google Tag Manager (GTM), the “Click Text” trigger is used to fire tags based on the text content of the clicked element. This is useful for tracking interactions with elements that have specific text, such as buttons, links, or other clickable elements with identifiable text.

GTM Containers

What are containers?

Google Tag Manager (GTM) containers are essentially the workspaces that hold all the tracking codes (tags), triggers, variables, and other configurations for a specific website or app. When you create a container, you’re setting up a place to manage all the tags for that particular site or app in one central location. Here’s a more detailed breakdown of what GTM containers are and what they do: Key Components of a GTM Container:

Tags: Tags are snippets of code (usually JavaScript) that send information to third-party services like Google Analytics, Google Ads, Facebook Pixel, and other marketing/analytics platforms. A container can hold multiple tags for various services. Triggers: Triggers define when and where the tags are fired. For example, a trigger might be set to fire a tag on all page views, on specific button clicks, or after a form submission. Variables: Variables are dynamic values that GTM uses to pass information between tags and triggers. For example, a variable could be the value of a page URL, a click text, or a custom data layer value. Folders: GTM also allows you to organize tags, triggers, and variables into folders to keep things structured, especially when managing a lot of elements.

How Containers Work:

One Container per Website/App: Each website or app typically has its own container. Once you create a container, you install it on your website or app by adding the GTM container code snippet to your site’s HTML or through a platform-specific integration. Centralized Management: The benefit of a container is that it centralizes the management of all your tracking codes. Instead of editing a website’s code every time you want to add or change a tag, you can simply update the tags within GTM, making the process much faster and less error-prone.

Benefits of Using GTM Containers:

Faster Deployment: You can add, edit, or remove tracking tags without needing to modify the website’s source code. Flexibility: Containers support tags from many third-party vendors, not just Google services, making it easier to manage multiple marketing and analytics tools. Version Control: Each time you make changes to a container and publish them, GTM creates a version history, allowing you to revert to an earlier version if needed.

In summary, a GTM container acts as a container for all the tracking and analytics scripts on your website or app, offering centralized control and flexibility.

What permissions are needed to create containers in GTM?

To create containers in Google Tag Manager (GTM), you need specific permissions at the account or container level. GTM has different roles, and the permissions granted depend on the role you are assigned.

Here’s a breakdown:

Account Permissions:

Admin: Full control, including creating containers, managing permissions, and all account-level actions. User: Limited to container-level actions unless additional container permissions are granted.

Container Permissions:

Read: View container configuration but cannot edit or create anything. Edit: Modify tags, triggers, and variables but cannot publish changes. Approve: Approve changes made by others but cannot publish. Publish: Make changes live by publishing them.

To create a new container:

You need to have Admin access at the account level, as container creation is an account-level action. If you’re unsure of your permissions, you can check by going to Admin > User Management in GTM. There, you’ll see your role and what actions you’re allowed to perform.

How to update user permissions in GTM

To change a user’s permission in Google Tag Manager (GTM), you’ll need to have Admin access to the GTM account. Here’s how you can do it: Steps to Change User Permissions in GTM:

Log in to Google Tag Manager: Go to Google Tag Manager and log in with your Google account.

Select the GTM Account: If you have access to multiple GTM accounts, select the one where you want to change the user’s permissions.

Go to the Admin Panel:

In the top navigation bar, click on the Admin button. This will bring you to the Account and Container settings.

Manage User Permissions:

Under the Account section, click on User Management. This will show you a list of users who have access to the account and/or containers.

Select the User:

In the user list, find the user whose permissions you want to change. Click on their name to open their permission settings.

Change Account Permissions (Optional):

If you want to change their Account-level permissions, you can select: Admin: Full control, including the ability to add/remove users and create/delete containers. User: Limited access, restricted to container-specific permissions.

Change Container Permissions:

You can also modify their permissions for specific containers within the account. Under Container Permissions, you will see a dropdown next to each container. You can set it to:

No Access: The user has no access to this container. Read: View-only access to the container. Edit: Ability to modify tags, triggers, and variables, but not publish changes. Approve: Ability to approve changes made by others but not publish them. Publish: Full control to edit, approve, and publish changes.

Save Changes: After adjusting the permissions, click the Save button to apply the changes.

Notes:

You can assign different permissions for different containers. For example, a user can have Publish rights on one container and only Read access on another. You can also add new users and set their permissions in the User Management section.

By following these steps, you’ll be able to manage and adjust user permissions within your GTM account.

This post is licensed under CC BY 4.0 by the author.