Join the Tagmate Family to get latest updates and blog recommendations every week.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Blog
GTM
Getting Started With Google Tag Manager: 2023 Complete Guide
GTM
Getting Started With Google Tag Manager: 2023 Complete Guide
By
4 min read
July 20, 2022
Out of the total websites in the world, more than 40% are built using WordPress. That’s a huge number for any CMS platform and hence, there is a great chance that your website is built using WordPress. Also, you probably use the WordPress Contact Form 7 plugin for your website's contact us form.
So tracking of WordPress contact form 7 is extremely important.
We will show two ways to track WordPress contact form 7
Traditional Google tag manager way that would take a lot of time.
You must have heard of Google Tag Manager (GTM) and how it can help you track events like form submission and purchases on your website.
But what exactly is GTM?
GTM is a tool that helps developers and website owners to easily create, deploy, and track tags on websites without having to edit the source code.
It manages all tags on your website be it marketing pixels, javascript code, or a custom HTML code.
As per w3techs survey, 43.3% of the organizations use a tag management system for their tracking needs. Out of these, 98% of the organizations have employed GTM on their website.
Let’s see some functionalities of GTM that make it the most sought-after.
With GTM you can easily track:
The number of users who have downloaded any content resource.
Form submissions.
How users interact with forms.
Events such as click events, link clicks, and others.
Track video player events like the start of the video, push, play, forward, watch time, and so on.
Scroll tracking, reading time, scanning time, number of page views, and track page sequences.
Ecommerce events for instance add-to-cart, product clicks, check-out, shipping info, purchase events, and so on.
Custom events that have a data layer.
This is not an exhaustive list… there are many more events that you can track with GTM.
Now that you are clued up with the value that GTM could bring to your business, let’s deep dive into the structure of GTM.
Components of GTM
The GTM structure consists of containers, tags, triggers, and variables as you can see in the image below.
Tags
Tag is nothing but a snippet of code. Tags represent the platform whose data you want to track. Some examples of tags are Google Analytics, Facebook Ads, and Google Ads.
Triggers
Triggers are the conditions on which a particular tag fires. Some common triggers are pageview, link click and form submission.
For instance, as you can see in the image below, the trigger type is Form Submission. This denotes that the tag will fire when a website visitor submits the form.
The trigger here answers three questions:
Where to track tags?
On the contact page.
When to track tags?
When the user submits the contact form.
How to track tags?
Method of form type, say form has proper element <form> which generates ‘submit’ event.
Variables
Variable is the value on which a trigger evaluates its condition.
It is used to store information about data layers.
For instance, for an add-to-cart event, you want to know the category and price of the product. In this case, variables need to be created to capture the values of category and price.
Variables are reusable, like in the above example of the add-to-cart event, the variable can be reused for add-to-cart events of all products.
These are the variables that are available in the GTM:
Now that we are familiar with tags, triggers, and variables. Let’s have a look at how to create a tag in GTM.
How to create a tag in GTM?
Step 1: Create an account
Step 2: Create a tag
Click on ‘Tags’ on the left navigation panel. Click on the ‘New’ button at the top-right corner.
Step 3: Name the tag
Enter the name of the tag.
In this guide, we will create a Google Analytics 4 tag to push data to GA4.
For creating a GA4 tag, click on ‘Google Analytics: GA4 Configuration’ on the right navigation bar.
Step 4: Enter measurement ID, event name, and triggering details
Now you can see the tag created in the dashboard as shown in the image below.
How to Install a GTM container on the website?
Step 1: Click on the container ID
On the dashboard, click on the container ID as highlighted in the red box in the image below.
Step 2: Copy the first code
Step 3: Go to admin of your website
For a WordPress site, click on ‘Appearance’ and then ‘Theme FilenEditor’ on the left navigation panel.
Step 3: Open the header.php file and paste the code right below the <Head> element
Step 4: Copy the second snippet of code
Step 5: Open the header.php file and paste the code right below the <body> element
Step 6: Update the file
Step 7: Open your website in browsers and inspect elements.
For inspecting element, press Ctrl + shift + c on windows.
Check the code in the <head> element as per below. You will see your GTM’s container ID.
As you can see, creating tags, triggers, and variables in GTM is no kid’s stuff! It becomes even more cumbersome with custom events and each additional parameter. And when you want to track hundreds of elements on your website, it is a tough row to hoe!
In such a case, you need a tool that automates setting up of tags.
Lorem ipsum dolor sit amet consectetur. Viverra ut feugiat id ipsum morbi. A ipsum massa consequat ut urna vestibulum enim. Mauris id dignissim eu donec. Nibh urna eu nisl volutpat ut purus amet habitant fermentum.
Lorem ipsum dolor sit amet consectetur?
Lorem ipsum dolor sit amet consectetur. Sodales pellentesque enim sed dolor. Vel elementum ullamcorper adipiscing nec tristique. Egestas tellus amet praesent pulvinar quis.
Lorem ipsum dolor sit amet consectetur bibendum diam vel aliquet aliquam fringilla amet turpis varius srcu tincidunt potenti in ut amet ac aliquet donec volutpat ?
Lorem ipsum dolor sit amet consectetur. Aliquam diam magnis imperdiet pulvinar posuere. Pretium leo sed nunc morbi. In nibh risus purus ipsum amet. Leo sed laoreet orci faucibus. Ut lorem augue eget id venenatis odio tortor nec. Adipiscing bibendum tellus neque tortor.
Lorem ipsum dolor sit amet consectetur vel id viverra ultricies sed hendrerit et nulla?
Lorem ipsum dolor sit amet consectetur. Viverra ut feugiat id ipsum morbi. A ipsum massa consequat ut urna vestibulum enim. Mauris id dignissim eu donec. Nibh urna eu nisl volutpat ut purus amet habitant fermentum.
Lorem ipsum dolor sit amet consectetur bibendum diam vel aliquet?
Lorem ipsum dolor sit amet consectetur. Viverra ut feugiat id ipsum morbi. A ipsum massa consequat ut urna vestibulum enim. Mauris id dignissim eu donec. Nibh urna eu nisl volutpat ut purus amet habitant fermentum.
Subscribe to get our latest updates
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
eBook
Nunc lectus tempus dolor libero vulputate dui sed velit Augue enim malesuada
Get served hottest tracking posts from industry-experts every week.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.