5 Advanced Google Tag Manager Tips – News Couple
ANALYTICS

5 Advanced Google Tag Manager Tips


If you already consider yourself an intermediate user or perhaps an advanced user of Google Tag Manager, you are likely looking for new ways to improve your GTM skills to be able to solve more complex challenges.

This is where things like JavaScript, Document Object Model (DOM), and similar topics become more important. These topics are hard to hack and cannot be explained in a single blog post. However, I wanted to give you quick tips that you can apply almost immediately without losing yourself among the countless documents and courses.

In this blog post, I am going to share 5 advanced tips for Google Tag Manager that I use a lot in my settings. We hope they help you too.

educational video

If you prefer video content, here is a tutorial from my Youtube channel.

#1. document.querySelectorAll()

Let’s say you want to track clicks of certain items on the page (menu items). These links don’t have identifiers and so you have two options: collaborate with a developer to implement them or try to apply and use CSS selectors (I explain them in the Intermediate/Advanced GTM course).

I’ve come up with a selector that works on all the items you need. But how do you make sure that the selector is correct and will only work for those items that you want to track? How do you ensure that the CSS selector will not wrongly return some irrelevant elements (such as footer links or sidebar links)?

Enters document.querySelectorAll(). It’s a method that will show you a list of all the elements on the page that match your CSS selector. If it returns too many elements, you need to do a better job and make the selector more specific.

To try this, open the JavaScript console in your browser’s developer tools, and enter the following command:

document.querySelectorAll("your_css_selector")

replace file your_css_selector Using the actual CSS selector you wish to test. In my case, the delimiter is “.site-nav__link”.

here. What I will see is a list of all the items on the page that use this class. In the example below, I got 5 items. You can find out from the number next to NodeList And if I click on the triangle next to it, I’ll see a list of all the HTML elements that use that site-nav__link CSS class).

If the method returns more elements, I will have to update the selector and make it more precise.

#2. JSON.parse()

Sometimes you might have transform data in the data layer but it’s stored as a string, not as an object (we know it’s a string because it’s enclosed in quotes).

What if you want to access only a specific key of that string, for example ID_shape? The long way would be to use string methods and parse the text. But this is an exaggeration.

If you have an object (read: complex structure) stored as a string (read: plain text), there is a useful method called JSON.parse(). It takes this string and returns the parsed object. This allows you to quickly get the desired key from the object.

For example, let’s say you’re tracking form submissions and this is what you have on the “Thank You” page in the data layer:

To solve this problem, you must first create a data layer variable that returns the string. This variable is called dlv – FormData

Then create a custom JavaScript variable that will pass the data layer variable to a file JSON.parse() method. Here is the code for the custom JavaScript variable:

function() 
   if (dlv - formData) 
      return JSON.parse(dlv - formData)
   

Importance: The data layer variable name in the code must be exactly the same as you named the data layer variable in the GTM interface.

If I save all of these changes, then enable preview mode, and submit the form again, here’s what I’ll see. The data layer variable returns the object as a string (enclosed in quotes).

But the Custom JS variable takes the data layer variable, parses it, and returns the object (not enclosed in quotes).

Now, how do you access a specific key in this object, for example form_id? You have to update the Custom JS variable like this:

I added .form_id Because this is the way to access the keys in the object. If you want to reach Model name, the variable code will be as follows:

function() {
   if (dlv - formData) {
      return JSON.parse(dlv - formData).form_name
   }
}

#3. Split() and decodeURIComponent()

Let’s say I want to extract part of a URL. This URL looks like this: https://www.analyticsmania.com/ google-tag-manager-recipes/this-is-a-very-cool-%26-important-page/? gtm_debug = x And I want to extract the part that is This-a-cool-page%26-is an important page.

There are two challenges here:

  • Somehow we need to get only this part of the URL
  • This part contains 26% strange. What is it and how do you get rid of it?

Noticeable: There are alternative ways to extract URL fragments but in this guide, I will explain this.

One way you can extract a piece of text (a string) is to use an extension split() method. You pass a separate to it and then it will return an array of all strings.

In your browser’s JavaScript console, enter the following command:

window.location.href.split('/')

window.location.href Displays the full URL you see in your browser’s address bar. In my case, it will be back https://www.analyticsmania.com/ google-tag-manager-recipes/this-is-a-very-cool-%26-important-page/? gtm_debug = x

.split (‘/’) means that this URL will be split into multiple (text) strings each time the slash (/) is detected. In this case, the function will return an array of 6 elements:

  • https
  • [empty space] (Because there were two consecutive slashes in https:// and there was nothing in between
  • www.analyticsmania.com
  • Google Tag Manager Recipes
  • This-a-cool-page%26-is an important page
  • gtm_debug = x

Now, I want to access the 5th member of that array, This-a-cool-page%26-is an important page. In JavaScript, indexing starts at 0, so the index of the fifth member is 4.

If I want to access this member, I have to use this [4].

Let’s update our JS code:

window.location.href.split('/')[4]

This will split the URL and will return the 5th member of the array, so the output will be This-a-cool-page%26-is an important page.

How about that %26? This is the encoded ampersand (&). If you want this to be displayed as & instead of %26, you will need to use the named method decodeURIComponent().

Let’s update the JavaScript code again.

decodeURIComponent(window.location.href.split('/')[4])

Now it will be back This is a very cool page–&–an important page.

If you want to use this code in GTM as a variable, create a custom JavaScript variable with the following code (we’ve already built most of that):

function() 
  return decodeURIComponent(window.location.href.split('/')[4])

And now you can use this on any tag you need.

#4. Extract the price from the page

Let’s say you’re tracking conversions and see the price displayed on the Order Confirmation page. How do you use it in your tags? One way could be to scrape the site with a custom JavaScript variable.

Although this is not recommended (working with the data layer is more powerful), in some cases, you have no other choice (maybe no developer is available in your project?).

The method of price scraping depends on how the price is displayed on the page. Do you look like this 12,000.00 USD? Or maybe $12.00? Or maybe something else? The final code depends on how the price is displayed and all options are covered in this blog post. So be sure to read it.

#5. Returns X or Y.

The last tip from the blog post is about using multiple variables. Suppose that after a successful payment, the visitor is redirected to the order confirmation page. The URL looks like this: https://www.mysite.com/thanks/?order_id=123abc.

You want to send this ID to Google Ads. You might say “Create a URL variable and use it in a tag”. This is correct. But what if your website is coded in a weird way? On some order confirmation pages, the identifier is in the URL, but on other pages, this identifier is in the data layer.

This will leave you with two variables, the URL variable and the data layer variable. They can both contain the same information but in most cases, you will have either one or the other available on the confirmation page.

How do you direct Google Tag Manager to use one or the other? A custom javascript variable is the answer. The code is fairly simple:

function()  variable 2;

The || In the code it means OR. So you point to the Custom JS variable to return the first variable. If it is undefined (read: unavailable), it will try to return the second variable. If it is also not available, it will return the variable undefined.

Obviously you should replace variable 1 and variable 2 with the actual names of your variables.

Advanced Google Tag Manager Tips: Final Words

We hope that at least some of these quick tips have taught you something new. Of these, the most popular technique in my group is document.querySeletorAll(). I constantly check if my terms don’t return unwanted items.

If some of these tips seem unclear, watch this video tutorial. Maybe that will help.



Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button