dataLayers & Google Tag Manager & GA4 for Developers (2022)

I am always amazed by the full-stack developer's knowledge, experience, and learning habits. They use too many tools at the same time and know most of them easy as winking.

One topic I am surprised though is not many developers know about dataLayers, Google Tag Manager; and how they can be a great combination to track the key metrics, funnels and gather a valuable amount of information.

We use dataLayers and Google Tag Manager mostly for analysis, reporting - but even for debugging purposes by tracking user behavior in-depth.

In this post, I will give you a high-level overview of how dataLayers, GTM, and GA4 can be used to track important user metrics and even find the problems!

Have any questions? Ask in the comments and I'll do my best to answer!

Case Study on dataLayers & Google Tag Manager

We have created a complex web application that would take users eight steps to complete their orders because the purchase process required a lot of customization.

The Problem

We had a serious problem. The conversion rate was quite low. We were losing a lot of clients in the funnel.

What We Did

The classic funnel tracking wasn't working for us because the URL wasn't changing at every step. Also, the classic funnel tracking doesn't allow you to pass extra data. So we needed to set up advanced dataLayers and send relevant data on each step. I will walk you through in this case study on:

  • How we used dataLayers to track important events and collect important information,
  • How we processed the dataLayers through Google Tag Manager,
  • How we passed the data into Google Analytics 4,
  • How we make meaningful FUNNELS to clearly understand bottleneck and user behavior on Google Analytics 4.

Let's get started!

What is a Data Layer?

Data Layer is one of the most essential concepts in the data-analytics world. It is like the main storage for certain events and relevant data where you, developers, or 3rd-party-tools tools can temporarily store data (about user, page content, etc.). You can also watch this video - where I demonstrate what a dataLayer is and how it works.

Let's immediately jump into the example:

<script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({ 'event': 'form_submitted', 'formLocation': 'footer' });</script>

This could be a simple example of a form-submission event. You could push this dataLayer code once the form is successfully submitted. Nothing will happen if you only do this. You will need to listen & process this data using Google Tag Manager. We will visit in the next steps.

DataLayers can include more complex data as well. Check the example below for Google Analytics 4's addToCart event.

// Measure when a product is added to a shopping cartdataLayer.push({ 'event': 'add_to_cart', 'ecommerce': { 'items': [{ 'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required. 'item_id': '67890', 'price': '33.75', 'item_brand': 'Google', 'item_category': 'Apparel', 'item_category2': 'Mens', 'item_category3': 'Shirts', 'item_category4': 'Tshirts', 'item_variant': 'Black', 'item_list_name': 'Search Results', 'item_list_id': 'SR123', 'index': 1, 'quantity': '2' }] }});

(Video) Data Layer in Google Tag Manager || GTM Data Layer Tutorial with examples

If you want to see another example, you can check out Analyzify Shopify DataLayers.

How we used dataLayers to track complex funnels

Our application has an 8-step complex, multilayered purchase process. That's why we added dataLayers on each step - and also included the relevant information.

Always make sure to create/open a window dataLayer object before you push any data.

<script>window.dataLayer = window.dataLayer || [];</script>

1st Step:

dataLayer.push({ 'event': 'signup-steps', 'step': '1', 'stepname' : 'GetStarted' });

2nd Step:

dataLayer.push({ 'event': 'signup-steps', 'step': '2', 'stepname' : 'Address', 'client-type':'Personal' //here we are passing the information that we received in the previous step });

7th Step:

(Video) Data Layer Explained With Practical Examples in Google Tag Manager

dataLayer.push({ 'event': 'signup-steps', 'step': '7', 'stepname' : 'Payment', 'uid': '12345', //the system generated a user ID in the 3rd step and we are now pushing it at each step 'payment-type' :'iFrame' // the user chose the payment type in the previous step });

8th Step:

dataLayer.push({ 'event': 'signup-steps', 'step': '8', 'stepname' : 'iFrame', 'uid': '12345', 'iFrame-ID' :'iFrame-ID' // the user chose the payment type in the previous step });

Final Step:

dataLayer.push({ 'event': 'signup-steps', 'step': '9', 'stepname' : 'ThankYou', 'uid': '12345', 'order-ID' :'order-ID' });

We have now pushed all the relevant information and user actions to dataLayer. It is time to process them using Google Tag Manager.

Data Layer & Google Tag Manager

You need to have a Google Tag Manager account and the GTM snippet should be inserted into your application to achieve this result. To understand the process better, you can check out this article where we set up GTM on Shopify. You will see there how to add and debug a GTM container.

Create a custom event trigger on GTM

We first need to create an event trigger in GTM. We named our event as 'event': 'signup-steps' in the dataLayer. So follow along:

Go to Google Tag Manager > Triggers (Left) > Create New
dataLayers & Google Tag Manager & GA4 for Developers (1)

Name the Trigger nicely, and choose CUSTOM EVENT from the Event Types:
dataLayers & Google Tag Manager & GA4 for Developers (2)

Use the exact same name as you pushed into the dataLayer >
dataLayers & Google Tag Manager & GA4 for Developers (3)

(Video) Google Tag Manager - Overview of Data Layer

Now we have the trigger. So the GTM will listen to this event carefully.

Create Custom Variables on GTM

Now it is time to create variables for the data that we are passing with the dataLayers. In the example above, we have step, stepName, uid, order-ID, iFrame-ID. Each of them should be created a separate custom variable - if we want to pass this data into Google Analytics or another platform.

Go to Google Tag Manager > Variables (Left) > New (Scroll down to see User-Defined Variables)

Similar to the above, we need to choose the Variable type. Choose DATA LAYER VARIABLE and name it correctly. We usually use a prefix dlv - so it looks like this dlv - user ID
dataLayers & Google Tag Manager & GA4 for Developers (4)

Make sure to use the exact same name as in the dataLayer:
dataLayers & Google Tag Manager & GA4 for Developers (5)

In the example here, I have only created one variable. You should create all of them one-by-one.

Google Tag Manager Debug DataLayers & Variables

Only a few times in my career, I could complete and publish the data setup without needing to change it. It never works in the first place :) That's why the debug process is crucial and needs to be done after every data implementation.

Once you are sure the GTM installed on your website >

Go to Google Tag Manager > Click Preview > Enter Your URL
dataLayers & Google Tag Manager & GA4 for Developers (6)

Enter your URL and click START. The window should open your website in the new tab and the "Debugger Connected" should be visible at the right-bottom corner.
dataLayers & Google Tag Manager & GA4 for Developers (7)

Once you see this, go back to the Tag Assistant tab on your browser and you should be seeing something like this >
dataLayers & Google Tag Manager & GA4 for Developers (8)

Now go back to your site and take a few of the actions that you are pushing the dataLayer for. Once you are back to the Tag Assistant, you should be seeing the event names and dataLayer details in the screen >
dataLayers & Google Tag Manager & GA4 for Developers (9)
These are dataLayers, now let's check if the variables we created are in place. Click the event name from the left, and then choose "Variables" from the tabs. You should be seeing the values.
dataLayers & Google Tag Manager & GA4 for Developers (10)

If you are not seeing it this way, most probably you have just misspelled the names. Make sure to double-check with the names in your dataLayers.

dataLayers & Google Tag Manager & GA4 for Developers (11)

Using Variables in GTM

As we have the events and variables, it is time to use them. We can pass that data to other parties such as Google Analytics, Facebook Pixel, and many others. In this example, I will create a Google Analytics 4 Custom Event and pass some of the data we collected.

We will now CREATE a NEW TAG. Go to GTM > Tags > Add New
dataLayers & Google Tag Manager & GA4 for Developers (12)
Choose Google Analytics 4 Event and name the tag properly. If you didn't add the GA4 tag before, you need to configure it first. Very easy, so I will skip that one. You can check this video if you don't know how to add GA4 with GTM.

Choose your configuration and name the event properly.
dataLayers & Google Tag Manager & GA4 for Developers (13)

(Video) What is DataLayer | Google Tag Manager Tutorial (Updated 2022 edition)

Now we will add custom variables. We will use EVENT PARAMETERS for event-based data and USER PARAMETERS for user-based data. Make sure to do something similar with the screenshot. A quick tip - when you write {{ on the right side - the variables will be listed so that you can choose the ones that you just created.

dataLayers & Google Tag Manager & GA4 for Developers (14)

Make sure that it looks like this. The parameters name on the left and variable names on the right >
dataLayers & Google Tag Manager & GA4 for Developers (15)

It is not done yet! We need to choose the trigger. We should choose the custom event we have created above so that this event will only be triggered when the expected action happens.

Click this >
dataLayers & Google Tag Manager & GA4 for Developers (16)

And then choose the trigger you recently created >
dataLayers & Google Tag Manager & GA4 for Developers (17)

Now all should be set, SAVE and then Publish the container. Submit from the right-top corner and then Publish.

Debug One Last Time!

I mentioned above. Data setup mostly doesn't work the first time. After you publish the changes, click PREVIEW mode again and type your URL. Do the desired actions and then you should be seeing tags, triggers, variables just like below >
dataLayers & Google Tag Manager & GA4 for Developers (18)

Google Analytics 4 Custom Events & Funnels

Even though GA4 is quite new, I have been fortunate to work with Google Analytics 4 intensely because of our GTM App for Shopify. GA4 is still under development and has some bugs but I love it and every day even more.

GA4 has many great features, and I mentioned the most important GA4 qualities in a blog post.

Now I will show you how to add custom events, parameters, data to GA4 and make funnels.

GA4 Custom Event Parameters

Make sure to register GA4 and add the global tag through GTM first. If you are not seeing a similar screen as below, you are probably not in Google Analytics 4 - but in the old one.
Click Custom Definitions > Create Custom Dimensions
dataLayers & Google Tag Manager & GA4 for Developers (19)

To be able to achieve this, you need to run some test user interaction so that GA4 receives your event data. If you don't see your new data-name here; wait for some time and try again. It can also be visible the next day.

dataLayers & Google Tag Manager & GA4 for Developers (20)

Once you complete this step, you are sending all the data to GA4 perfectly and you are ready to create your amazing funnels. I will have another article on that so stay tuned!

Any questions? Did you face any problems? More than happy to answer.

FAQs

Does Google Tag Manager work with GA4? ›

Google Tag Manager supports Google Analytics 4 properties with two tags that work together: Google Analytics: GA4 Configuration. Google Analytics: GA4 Event.

Is Google Tag Manager difficult to learn? ›

Google Tag Manager is not “easy” to use without some technical knowledge or training (courses or self-taught). You have to have some technical knowledge to understand how to set up tags, triggers and variables. If you're dropping in Facebook pixels, you'll need some understanding of how Facebook tracking pixels work.

Can I use both GTAG and GTM? ›

Google Ads and Google Marketing Platform tags are fully supported by Tag Manager, and there is no need to deploy additional gtag. js-based code on your site if Tag Manager is already in use. If you're already using gtag. js, you can always upgrade to Tag Manager at a later date.

Do I need both Google Tag Manager and Google Analytics? ›

Essentially, Google Tag Manager is just the middleman between the implementation on your website and the tracking tool (Google Analytics), where the data gets sent. I would recommend using both tools because they're both free and they can help your business in different ways.

Does GA4 sample data? ›

GA4 doesn't sample data for the standard reports, which you can find in the menu on the left under Reports. This includes: Real-time.

Is GA4 replacing Google Analytics? ›

Google Analytics 4 is our next-generation measurement solution, and it's replacing Universal Analytics. On July 1, 2023, standard Universal Analytics properties will stop processing new hits. If you still rely on Universal Analytics, we recommend that you prepare to use Google Analytics 4 going forward.

How long does it take to complete Google Tag Manager? ›

How long will this course take to complete? If you go through all the course content sequentially, we expect the course to take 4-6 hours to complete, depending on your level of familiarity with the course content.

Is Google Tag Manager the same as Google Analytics? ›

Google Tag Manager and Google Analytics are both Google tools used for tracking website data. However, they serve different purposes. Google Tag Manager is used for managing tags on a website, while Google Analytics is used for analyzing website data.

Should I use GTAG or GTM? ›

If you have to make a choice between Gtag and GTM, my recommendation would be to go with GTM. Once your developer has implemented the Google Tag Manager container everything can be done within the platform, you won't need to hardcode anything in the source.

How many GTM containers do you need? ›

Each GTM account can have one or more container tags. The rule of thumb is to create one container tag for each website.

How many tags can you have in GTM? ›

There is no hard limit on the number of tags that you can deploy on a site using Google Tag Manager. However, the best practice is to keep the number of tags that you have as lean as possible. Note also that Google Tag Manager can only fire tags within the capabilities of the browser.

What is difference between GTM and ga4? ›

GTM is used for storing and managing the code – it is literally a container. There are no reporting features and there is no option to analyze data within tag manager. GA is used for data analysis. All reporting: user reports, custom segments, conversions and engagement, ecommerce sales, etc.

Is there a certification for Google Tag Manager? ›

Google Tag Manager Training Course

There's even a certificate of completion available at the end. Who is this for? Intended for beginners using GTM for the first time, this course provides a behind-the-scenes overview of Google's tag management platform.

Is Google Tag Manager paid? ›

Cost: It is completely free. Google Tag Manager is a free product and it has no usage limits (no limits on the number of pageviews).

How long does it take for GA4 to show data? ›

Many of your reports and explorations can take 24-48 hours to process data from your website or app. You can use the Realtime and DebugView reports to confirm that you're collecting data from your website or app successfully.

What is the difference between GA4 and Google Analytics? ›

Universal Analytics tracks screenviews in separate mobile-specific properties, whereas GA4 combines both web and app data in the same property. If you are tracking both web and app data in your GA4 property, be sure to take the additional app traffic into consideration when comparing pageview metrics between the two.

What is GA4 good for? ›

GA4 is a new property designed for the future of measurement: Collects both website and app data to better understand the customer journey. Uses event-based data instead of session-based. Includes privacy controls such as cookieless measurement, and behavioral and conversion modeling.

Why should I switch to GA4? ›

GA4 makes it easier to follow a visitor's journey without having to implement Google Tag Manager. So, while the data model is changing, GA4 makes cross-device tracking easy and the data points are more precise.

What is missing from GA4? ›

Limited IP filtering: On a related note, you also have limited IP filtering in GA4. You'll notice you're limited in how many IP addresses you can block, especially since GA4 doesn't support RegEx. 3. No hostname filter: You can set this up in Google Tag Manager, but it's not currently available in GA4.

Should I upgrade to GA4? ›

Why You Should Upgrade to GA4. Google Analytics 4 is the next generation of web analytics, and it's very smart. Google is really working hard to bring automated insights, upgraded event tracking and more to all its users. Also, there won't be any further improvements made to Universal Analytics.

Can you complete a Google certificate in 7 days? ›

How Long Does It Take to Get the Certificate? The course is designed to be completed within three to six months, provided you spend about five hours per week on learning.

Can you finish Google certificate in a week? ›

The Google Career Certificate courses generally take three to six months to complete. Users set their own pace, so the time it takes to finish varies. The certificates for IT support, IT automation, UX design, data analytics and project management are offered on Coursera for $39 a month each.

Can you have 2 Google Tag Managers? ›

Agencies can manage their clients' existing accounts in the admin section of Tag Manager. Multiple users can manage the same Google Tag Manager account, and each user can be given different access permissions by the account administrators. 360 customers can add and control additional containers using zones.

What are GTM tools? ›

GTM Tools are the Google Sheets extension of Simo Ahava's www.gtmtools.com. This Google Sheets extension is free to use, and the first version includes documentation building tools with which you can automatically generate documentation for your Google Tag Manager container, tags, triggers, and variables.

What is GTM used for? ›

Google tag manager (GTM) is a free tag management platform that enables marketers to deploy and track marketing data by easily adding code snippets to their website or app. It allows marketers to track conversions, website analytics, retargeting, and more without the intervention of webmasters.

How do I structure a GTM plan? ›

How to write a GTM plan
  1. Identify your buying team and personas. ...
  2. Use a value matrix and identify messaging. ...
  3. Test your messaging. ...
  4. Continuously optimize your ads. ...
  5. Scale ads that work. ...
  6. Pick a sales strategy (or more than one). ...
  7. Build brand awareness and generate demand. ...
  8. Support prospects throughout the buyer's journey.

Is Google Tag Manager an API? ›

The Google Tag Manager API provides access to Google Tag Manager configuration data for an authorized user. With this API you can manage: Accounts. Containers.

Is Google Tag Manager going away? ›

The current version of Google Tag Manager (version 4, or “Legacy”) for mobile apps will no longer be supported by Google as of March 2020.

Is Google Tag Manager a security risk? ›

GTM is a code-injection tool prone to security vulnerabilities. Since GTM is a code injection tool, it's not only blocked by ad blockers. It also opens up your site to exploitation because its ability to insert code could open the door to hackers.

What is the difference between GTAG js and analytics js? ›

Unlike analytics. js, gtag. js doesn't use trackers to send data to Google Analytics. It sends data to Google Analytics properties identified by their IDs set by the config command.

Is GTM same as UTM? ›

UTM and GTM are Not Linked to Each Other

GTM does not provide any analytics. It can be used to deploy Google Analytics tracking, but using a UTM tag does not rely on GTM in any way. UTM tags aren't configured in Google Tag Manager because they aren't deployed on your website.

What is the difference between UTM and GTM? ›

UTM parameters are something that we use to understand the source of traffic by which it means Acquisiton data in the Google Analytics. GTM is something that we use to track an action or behavior of the user that land on your website.

What are the three basic components of a GTM container? ›

Each GTM container has three key components: Tags. Rules. Macros.

Can we use same GTM containers on multiple sites? ›

If you have three websites that are very similar and, say, the main difference is localization (language), then I'd recommend using the same GTM container on all three websites. Because, most likely, you'll be tracking the same things on all websites.

Where should GTM code be placed? ›

Standard web page installation

The first code block is best placed immediately after the web page's opening <head> tag, or as high in the <head> as possible. This helps to ensure that your Tag Manager configuration is available and ready when the rest of the page loads.

Why is it called GA4? ›

Google Analytics 4 (GA4) is the latest version of Google Analytics. Since it is the fourth version, it is called GA4. Following are the other three versions: The first version of Google Analytics (GA1) is the Classic Google Analytics which uses the ga.

Can Google Tag Manager replace Google Analytics? ›

A Tag Manager container can replace all other manually-coded tags on a site or app, including tags from Google Ads, Google Analytics, Floodlight, and 3rd party tags.

Does Google Tag Manager affect SEO? ›

Google Tag Manager (GTM) is a Google product that helps SEO professionals gain much more insight into what is happening on a Website. GTM also provides a way to easily add tags and triggers as well as add things like Google Analytics and other SEO related software.

Is Certified Manager certification worth it? ›

While anyone can claim to have the leadership and organizational skills of a project manager, having the certification to prove it can really make you stand out and it can add significant value to your resume.

How much do professional tag makers make? ›

On average, a professional tag player makes between $1,000 and $5,000 a month depending on their skill level.

Is Tag Manager part of Google Analytics? ›

Google Tag Manager does not replace Google Analytics.

Instead, it helps users easily add Google Analytics tracking codes (tags) to their website, deploy GA code snippets and define rules when each tag must fire. Google Tag Manager is the middleman of your digital analytics implementation on any website.

How do I link Google Tag Manager to GA4? ›

Step 1: To start setting up your GA4 tag, navigate to your desired account and container within GTM and select “Add a new tag.” Step 2: Now, click within “Tag Configuration” to see the options for various types of tags. Select Google Analytics: GA4 Configuration. Step 3: You'll see a field to enter your Measurement ID.

How do I track Google Ads in GA4? ›

To start bidding on your GA4 conversions, you need to change them to "primary" as follows:
  1. Sign in to your Google Ads account.
  2. In the top right, click Tools and Settings. ...
  3. Go to Measurement > Conversions.
  4. Find the goal that includes the conversion action you'd like to edit.
  5. Click Edit goal.

Does GA4 integrate with Google Ads? ›

You can link Google Analytics 4 properties to individual Google Ads accounts and to Google Ads manager accounts. You can create up to 400 links per property.

How do I create an event in Google Tag Manager for GA4? ›

To create a new custom event trigger in GTM: Click Triggers on the left side menu, then clickNew. Click Trigger Configuration and choose the All Elements under the Click trigger type. Click Some Clicks.

How do I implement GA4 on my website? ›

Get started
  1. In Google Analytics, click. ...
  2. In the Account column, make sure that your desired account is selected. ...
  3. In the Property column, select the Universal Analytics property that currently collects data for your website.
  4. In the Property column, click GA4 Setup Assistant.

How do I transfer data from GTM to GA? ›

Use GTM Data Layer to integrate Convert with GA
  1. understand gtm data layer.
  2. add tracking codes.
  3. push convert data to gtm data layer.
  4. use gtm data layer to send convert data to ga.
  5. create the custom dimension in ga.
  6. enable the ga integration.
  7. create the experiment id data layer variable in gtm.
2 Feb 2022

How do you add a GA4 tracking code to a website without Google Tag Manager? ›

How to Add GA4 Tracking Code to Website without Using Google Tag Manager
  1. Option One: Connect the Measurement ID to existing UA Property in Universal Analytics.
  2. Option Two: Add a new 'Config' directive in the existing code on the website.
  3. Option Three: Copy and Paste the GA4 tracking code script IN the <head> section.

How does GA4 track data? ›

Google Analytics collects information about your web pages and app screens by adding information about them to events. You can use this information to populate dimensions and metrics to see which pages and screens your users interact with.

How are users tracked on GA4? ›

If you are using User-ID, then Analytics only includes the user identifier and the device identifier for the last device associated with each logged-in user. If you're not using User-ID, Analytics includes all device and user identifiers in the audience information it exports to Ads.

What data does GA4 collect? ›

[GA4] Data collection
  • Number of users.
  • Session statistics.
  • Approximate geolocation.
  • Browser and device information.

Should I use GA3 or GA4? ›

In the case of GA4, both the web and app data use the same schema. Whereas in the case of GA3, this is not the case. Because of this reason, GA4 provides much more robust and reliable cross-device and cross-platform tracking than GA3.

Why are there no views in GA4? ›

What Does GA4 Use Instead of Views? As we mentioned, Google Analytics 4 doesn't use views. In Universal Analytics, you set up views, such as one to exclude internal traffic from your employees, and then apply filters to customize your view. In GA4, you have a single reporting view and data streams that feed into it.

What is Google Tag Manager used for? ›

Tag Manager gives you the ability to add and update your own tags for conversion tracking, site analytics, remarketing, and more. There are nearly endless ways to track activity across your sites and apps, and the intuitive design lets you change tags whenever you want.

How do I transfer data to GA4? ›

Use the GA4 Setup Assistant and select the option to "Enable data collection using your existing tags" (This option uses a feature called connected site tags) Manually add a new "config" command with your tag ID (e.g., G-XXXXXXXX)

How many events can you create in GA4? ›

You can modify up to 50 existing events and create up to 50 events based on existing events.

Videos

1. Google Tag Manager vs Google Analytics. What’s the difference?
(Analytics Mania - Google Tag Manager & Analytics)
2. 5 Advanced JavaScript Techniques for GTM
(MeasureSchool)
3. GA4 👉 Data layer Enable on our Ecommerce Store || Skilled developers
(Skilled Developers)
4. Install Google Tag Manager on Shopify (and Send Purchases to Google Analytics 4)
(Loves Data)
5. User ID tracking with Google Analytics 4 and Google Tag Manager
(Analytics Mania - Google Tag Manager & Analytics)
6. Advanced Google Analytics and other integrations with GTM and dataLayer
(Bay Area Drupal Camp)

Top Articles

Latest Posts

Article information

Author: Rubie Ullrich

Last Updated: 12/19/2022

Views: 6663

Rating: 4.1 / 5 (52 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Rubie Ullrich

Birthday: 1998-02-02

Address: 743 Stoltenberg Center, Genovevaville, NJ 59925-3119

Phone: +2202978377583

Job: Administration Engineer

Hobby: Surfing, Sailing, Listening to music, Web surfing, Kitesurfing, Geocaching, Backpacking

Introduction: My name is Rubie Ullrich, I am a enthusiastic, perfect, tender, vivacious, talented, famous, delightful person who loves writing and wants to share my knowledge and understanding with you.