I never cease to be amazed by the knowledge, experience, and learning habits of full-stack developers. You use a lot of tools at the same time and you know most of them like a heartbeat.
One question that surprises me, however, isFew developers know about dataLayers, Google Tag Manager; and how they can be a great match for tracking key metrics and funnels and gathering valuable insights.
We mainly use dataLayers and Google Tag Manager for analysis, reporting - but also for debugging purposes, closely monitoring user behavior.
In this post I will give an overview of how dataLayers, GTM and GA4 can be used to track key user metrics and even find the issues!
do you have questions? Ask in the comments and I'll do my best to answer!
Case study on dataLayers and Google Tag Manager
We created a complex web application that requires users to complete their orders in eight steps, as the purchase process requires a lot of customization.
The problem
We had a serious problem. The conversion rate was pretty low. We lost a lot of customers in the funnel.
What have we done
Classic funnel tracking didn't work for us because the URL didn't change with each step. Also, classic funnel tracking doesn't allow you to pass in additional data. So we had to configure advanced DataLayers and send relevant data at each step. In this case study, I will guide you through the following topics:
- As we use dataLayers to track important events and collect important information,
- As we process dataLayers through Google Tag Manager,
- As we pass the data to Google Analytics 4,
- How we build powerful FUNNS to clearly understand bottlenecks and user behavior in Google Analytics 4.
Let's start!
What is a data layer?
Data Layer is one of the most important concepts in the world of data analysis. It's like the main storage for specific events and relevant data, where you, developers or third-party tools can store data (about users, page content, etc.) temporarily. You can also watch this video - where I demonstratewhat is a DataLayer and how does it work.
Let's jump straight to the example:
<script>window.dataLayer = fenster.dataLayer || [];window.dataLayer.push({ 'event': 'form_submitted', 'formLocation': 'footer' });</script>
This could be a simple example of a form submit event. You can submit this dataLayer code once the form is successfully submitted. If you just do that, nothing will happen. You need to listen and process this data with Google Tag Manager. We will visit in the next steps.
DataLayers can also contain more complex data. Consider the following example of the Google Analytics 4 addToCart event.
// Measure when a product is added to a cart dataLayer.push({ 'event': 'add_to_cart', 'ecommerce': { 'items': [{ 'item_name': 'Donut Friday Scented T-Shirt', // Name or ID required.'item_id': '67890', 'price': '33.75', 'item_brand': 'Google', 'item_category': 'Apparel', 'item_category2': 'Men', 'item_category3' : 'Shirts', 'item_category4': 'T-Shirts', 'item_variant': 'Black', 'item_list_name': 'Search results', 'item_list_id': 'SR123', 'index': 1, 'quantity': ' two ' }] }});
If you want to see another example, you can have a lookAnalyzing Shopify DataLayers.
How we track complex funnels using dataLayers
Our app has a complex, multi-layered 8-step purchase process. That's why we add dataLayers to each step - and include the relevant information as well.
Always make sure to create/open a DataLayer widget before transferring data.
<script>window.dataLayer = window.dataLayer || [];</script>
1st step:
dataLayer.push({ 'event': 'enrollment steps', 'step': '1', 'stepname' : 'GetStarted' });
2nd step:
dataLayer.push({ 'event': 'signup-steps', 'step': '2', 'stepname' : 'Address', 'client-type': 'Personal' //here we pass the information we get in the step previous });
7th step:
dataLayer.push({ 'event': 'signup-steps', 'step': '7', 'stepname' : 'Payment', 'uid': '12345', //the system generated a user ID on the third step and now we are pushing it in each step 'payment-type' :'iFrame' // payment type selected by the user in the previous step });
8th step:
dataLayer.push({ 'event': 'enrollment steps', 'step': '8', 'stepname' : 'iFrame', 'uid': '12345', 'iFrame-ID' :'iFrame-ID' // the user selected the payment method in the previous step });
Last step:
dataLayer.push({ 'event': 'signup-steps', 'step': '9', 'stepname' : 'ThankYou', 'uid': '12345', 'order-ID' :'order-ID' });
Now we send all relevant information and user actions to dataLayer. It's time to process them with Google Tag Manager.
Google Data Layer and Tag Manager
You must have a Google Tag Manager account and the GTM snippet must be included in your application to achieve this result. To better understand the process, you can read this article whereConfigurar GTM na Shopify. There you will see how to add and debug a GTM container.
Create a custom event trigger in GTM
First we need to create an event trigger in GTM. This is how we named our event'event': 'Login steps'in the data layer. Then join us:
Go to Google Tag Manager > Triggers (on the left) > Create New
Name the trigger well and choose CUSTOM EVENT under Event Types:
Use exactly the same name you moved to the data layer >
Now we have the trigger. The GTM will therefore be listening closely to this event.
Create custom variables in GTM
Now it's time to create variables for the data that we will be passing with the dataLayers. In the example above we have step, stepName, uid, order-id, iframe-id. A separate custom variable must be created for each of them - if we want to pass this data to Google Analytics or another platform.
Go to Google Tag Manager > Variables (on the left) > New (scroll down to see custom variables)
Similar to above, we need to select the variable type. Select DATA LAYER VARIABLE and name it correctly. We normally use a dlv prefix - so it looks like thisdlv - User ID
Be sure to use the exact same name as the data layer:
In the example here, I created just one variable. You must create each one individually.
Google Tag Manager Debugging Data Layers and Variables
Only a few times in my career have I been able to finish setting up the data and publishing it without having to change it. It never works from the beginning :) This is why the debugging process is crucial and must be done after every data implementation.
Once you're sure GTM is installed on your site >
Go to Google Tag Manager > click Preview > enter your URL
Enter your URL and click START. The window should open your site in a new tab and "Debugger Connected" should be visible in the lower right corner.
Once you see this, go back to the Tag Helper tab in your browser and you should see something like this >
Now go back to your website and perform some of the actions you've been pushing the data layer for. After returning to the Tag Wizard, you will see the event names and dataLayer details in Canvas >
These are dataLayers, now let's check if the variables we created exist. Click on the event name on the left and select Variables from the tabs. You should see the values.
If you don't see it that way, you've probably just typed the names incorrectly. Be sure to check the names in your dataLayers.
Using variables in GTM
Now that we have the events and variables, it's time to use them. We may share this data with other parties such as Google Analytics, Facebook Pixel and many others. In this example, I'll create a Google Analytics 4 custom event and pass it some of the data we collect.
Now let's CREATE a NEW TAG. Go to GTM > Tags > Add New
Select Google Analytics 4 Event and name the tag correctly. If you haven't added the GA4 tag yet, you must configure it first. Very simple, so I'll skip it. You can check this video if you don't knowhow to add GA4 with GTM.
Choose your configuration and name the event correctly.
Now let's add custom variables. We use EVENT PARAMETERS for event-based data and USER PARAMETERS for user-based data. Make sure you do something similar with the screenshot. A quick tip - if you write{{on the right - variables are listed so you can select the ones you just created.
Make sure it looks like this. The parameter name on the left and the variable name on the right >
It is not ready yet! We have to choose the trigger. We must select the custom event created above so that this event is triggered only when the expected action happens.
Click here >
Then select the trigger you recently created >
Now everything must be defined, SAVE and then publish the container. Submit in the upper-right corner, then Publish.
Debug one last time!
I mentioned above. Data setup usually doesn't work the first time. After publishing the changes, click PREVIEW mode again and enter your URL. Perform the desired actions and you will see Tags, Triggers and Variables as below >
Google Analytics 4 Custom Events and Funnels
Although GA4 is relatively new, I was lucky due to our extensive work with Google Analytics 4GTM app for Shopify. GA4 is still in development and has some bugs, but I love it more every day.
GA4 has many great features and I mentionedthe most important GA4 qualitiesin a blog post.
Now I'll show you how to add events, parameters and custom data to GA4 and create funnels.
GA4 custom event parameters
Make sure you register GA4 and add the global tag via GTM first. If you don't see a screen similar to the one below, you're probably not in Google Analytics 4, you're in the old one.
Click Custom Definitions > Create Custom Dimensions
To accomplish this, you need to run a test user interaction for GA4 to receive your event data. If you don't see your new data name here; wait a while and try again. It may also be visible the next day.
After completing this step send all the data seamlessly to GA4 and you are ready to create your awesome funnels. I'll have another article on that, so stay tuned!
Any question? Were there any problems? More than happy to answer.
FAQs
Does Google Tag Manager work with GA4? ›
This article covers what you need to do so a Google Tag Manager web container sends events to GA4. The GA4 Configuration tag ensures data flow from your website to Google Analytics. Create one configuration tag on every page where you want to collect analytics data.
Do you need both Google Analytics and Google Tag Manager? ›Without Google Tag Manager, Google Analytics may be used. Without Google Analytics, Google Tag Manager may be used. To use both in conjunction, each must be configured independently. Both are implemented similarly on your website, utilizing javascript code snippets.
How to track events with Google Analytics 4 and Google Tag Manager? ›- In Google Tag Manager, click Tags > New.
- Enter a name for the GA4 Event tag at the top (e.g., "GA4 Event - Signup newsletter").
- Select Google Analytics: GA4 Event.
- In Configuration Tag, select your Google Analytics: GA4 Configuration tag.
- In Event Name, enter a name for the event (e.g. signup_newsletter ).
Last updated 24 August 2022: The GA4 Event tags in Google Tag Manager have been updated to allow you to load the Ecommerce data directly from the dataLayer (if following the GA4 schema) or from a Custom JavaScript variable (or a custom template), as long as it returns an object in the GA4 ecommerce schema.
Is Google Tag Manager hard to use? ›There is still some setup required, but it is relatively easy to do. You can use those interactions to fire tracking codes, e.g. Google Analytics Event Tag. Basic events that you can track (by default) in GTM are based on: Clicks.
What is the difference between GTM and GA4? ›In a nutshell: GA is the analytics tool that provides reports about activity on your site. GTM is a tool that fires your tracking codes based on defined rules. In the end, you can either implement GA code on your site directly or implement the GTM code on a site and use GTM to fire your GA code.
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.
Can you use Google Tag Manager and Google Analytics together? ›To implement Google Analytics as a tag within Google Tag Manager, you'll need to: Create a new tag within Google Tag Manager. Choose Google Analytics as the tag type. Instruct Google Tag Manager to send the tracking event to your Google Analytics Tracking ID.
Is Google Tag Manager deprecated? ›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.
How long does it take for Google Analytics 4 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.
How many events can you have in GA4? ›
There is no limit on the number of distinctly named events for web data streams. Automatically collected events and enhanced measurement events don't count toward the limits.
How do I use Google Analytics 4 for beginners? ›- Create a new GA4 property.
- Create a data stream.
- Copy the Measurement ID.
- Create a Google Analytics 4 Configuration tag.
- Paste the Measurement ID and set the tag to fire on All Pages.
- Preview/test the new tag.
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 do I extract data from GA4? ›- Select the report you want to export and the date range of interest. ...
- From the right pane, select Download File. ...
- Select the option Download CSV.
- Now, the raw data of your report is stored on your computer. ...
- Select CSV and click Import.
GA4 uses machine learning to predict purchase probability and churn for each individual user. This means that you can target your marketing efforts more effectively and focus on the most likely users to convert or churn. Additionally, GA4 will continue to learn and get more accurate over time.
What are the 3 main parts of Google Tag Manager? ›There are 3 main components to Google Tag Manager: Tags, Triggers, and Variables.
How do I practice Google Tag Manager? ›- Create a Sandbox and Get GTM Installed. Your challenge: Create a WordPress Sandbox website with a working installation of Google Tag Manager. ...
- Create a Tag Plan & Deploy Your First Tags. ...
- Learn Triggers & Auto-Event Tracking. ...
- The Data Layer and Debugging. ...
- More to Learn & Getting Involved.
- Plan before the implementation.
- Account/container structure and ownership.
- Use Proper Naming Conventions.
- Give GTM control only to the right people.
- Leverage Workspaces.
- Use GA Settings Variable.
- Consider using constant variables.
- Use Lookup/Regex Tables.
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.
Does GA4 have dashboards? ›Once you have connected Data Studio with Google Analytics 4, you can then proceed to build your own dashboard.
Does GA4 work without cookies? ›
GA4 is promoted as privacy-centric and has been designed to work with or without cookies. By leveraging machine learning and statistical modeling, GA4 can fill in data gaps as the world becomes less and less dependent on cookies.
How fast can you do Google certification? ›How long does it take to earn a Google certification? Most certification courses and assessments take between three and six months to complete. Depending on the subject, Google estimates that most learners take about 10 weeks on each course.
How many hours is Google certification? ›Take the Google Certified Educator Level 1 exam (~3 hours) to assess your ability to successfully integrate Google tools into their teaching practice to enhance teaching and learning. This exam will help you build your confidence as you work with educators and Google tools.
Is Google Tag Manager good for SEO? ›Google Tag Manager is a fantastic tool to give SEOs the flexibility to test SEO modifications to stuff like meta descriptions, structured data, and canonicals. Bear in mind that this should be temporary changes that will at some point be implemented by the development team.
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.
What is the biggest difference between Google Tag Manager and 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.
Can you run Universal analytics and GA4 at the same time? ›By dual tagging you can keep your Universal Analytics implementation in place while you build out your Google Analytics 4 implementation.
When should I use Google Tag Manager? ›Use Tag Manager to manage tags (such as measurement and marketing optimization JavaScript tags) on your site. Without editing your site code, use Tag Manager to add and update Google Ads, Google Analytics, Floodlight, and third-party tags.
Do ad blockers block Google Tag Manager? ›Typically, the default settings of ad blockers won't hurt Google Analytics or Google Tag Manager (GTM). Ad blockers will only block ads on the page that the user visits, but since users can adjust settings for adblockers to remove any tracking scripts, GTM will not work in this case.
How to deploy GA4 with GTM? ›- Create a new Google Analytics 4 property.
- Add a data stream for your website or mobile app.
- Create a GTM configuration tag. Also, copy the measurement ID.
- Now, create a trigger to fire on all the pages.
- Preview the changes done in GTM.
- Submit the container.
How do you implement ecommerce tracking with Google Tag Manager for GA4? ›
- Open the Google Tag Manager container for your existing Universal Analytics implementation.
- Click Tags > New.
- Click Tag Configuration and select GA4 Configuration.
- Enter the tag ID of your Google Analytics 4 property.
- Select to trigger the tag on All Pages (or on the subset of pages you want to measure).
You can link a Search Console property to only one web data stream. (You can also link the same Search Console property to one Universal Analytics property.) A Google Analytic 4 property can have only one data stream linked to a Search Console property.
How does GA4 detect bot traffic? ›Known bot traffic (in both Google Analytics 4 and Universal Analytics properties) is identified using a combination of Google research and the International Spiders and Bots List, maintained by the Interactive Advertising Bureau. Visit the Interactive Advertising Bureau (IAB) website for more information.
How do I integrate GA4 into my website? ›- In Google Analytics, click. ...
- In the Account column, make sure that your desired account is selected. ...
- In the Property column, select the Universal Analytics property that currently collects data for your website.
- In the Property column, click GA4 Setup Assistant.
Hackers are abusing Google's Tag Manager (GTM) containers to install malicious e-skimmers that steal payment card data and personally identifiable information of shoppers on e-commerce sites, according to a new report from Recorded Future.
How do I track new users on GA4? ›New Users in GA4
If you go into your Acquisition reporting area within the GA4 standard reports, you'll find New Users within the “User acquisition” report. You can see this below for the Root and Branch GA4 property where the first column contains the “New users” dimension.
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.
Can you run Universal Analytics and GA4 at the same time? ›By dual tagging you can keep your Universal Analytics implementation in place while you build out your Google Analytics 4 implementation.
Can I add Universal Analytics to GA4? ›At any time, you can associate a Universal Analytics property with your existing GA4 property and benefit from UA reports in addition to GA4 reports. To do this, you need first to create your UA property, which you will then associate with your existing GA4 property.
How do I connect Google Studio data to GA4? ›- Log In to Google Data Studio.
- Create Data Source.
- Selecting the Google Analytics 4 Property.
- Connect Data Source with Schema.
- Create Report.