How to Add JavaScript to Google Tag Manager (GTM)

Google Tag Manager is written in JavaScript. Everything you configure in Google Tag Manager (GTM) is essentially writing JavaScript code. Google Tag Manager provides an easy visual editor for you to configure various JavaScript code snippets.

If you know JavaScript coding then you can take tracking via Google Tag Manager to advanced levels. As the user interacts with a browser (available via JavaScript Window object) and the document (available via Document Object Model or DOM), you can track pretty much everything the user is doing on your site. You can every us variables from 3rd party tags to enhance your tracking.  If you are interested to learn more about the possibilities or have some specific use cases then reach out to me.

 

Where in Google Tag Manager (GTM) Can You Use JavaScript?

In Google Tag Manager, you can use JavaScript or JavaScript-like syntax in only three sections/parts.  Two of them are within variables and one in tags.

 

JavaScript Variable in Google Tag Manager

JavaScript variables allow you to use global variables available in your browser window.  By configuring JavaScript Variable you can create tags and triggers based on the values of these global variables.

To capture the value of these global JavaScript variables follow these steps

  1. Click on Variables in Google Tag Manager
  2. Scroll down to the "User Defined" variable section
  3. Click on "New"
  4. Click in the middle to configure the new variable
  5. In the next window under "Page Variables" select "JavaScript Variable"
  6. In the next window enter the variable name using the dot notation
  7. Give your variable a name and hit save.

 

Custom JavaScript Variable in Google Tag Manager

Custom JavaScript Variables allow you to use write your own function and return a value to be used for the variable.  Similar to JavaScript Variable you can create tags and triggers based on the values of custom Javascript variables.

To capture the value of these global JavaScript variables follow these steps

  1. Click on Variables in Google Tag Manager
  2. Scroll down to the "User Defined" variable section
  3. Click on "New"
  4. Click in the middle to configure the new variable
  5. In the next window under "Page Variables" select "Custom JavaScript"
  6. In the next window create a custom function that you want to use.
  7. The value returned from this function is going to be assigned to the variable that you created.
  8. Give the variable a name and hit save.

Custom HTML in Google Tag Manager

  1. Click on Tags in Google Tag Manager
  2. Click on "New"
  3. Click in the middle to configure the new variable
  4. In the next window under "Custom", select "Custom HTML"
  5. Now enter the HTM and JavaScrip that you want to use for your tag.
  6. Hit save, give your tag a name, and add a trigger.

 

Google Tag Manager JavaScript Video

Learn JavaScript for Google Tag Manager

JavaScript is a very vast language and it can get overwhelming for digital markters and analysts.  Considering this, we have created a course that teaches you only those fundamentals that you are going to use to enhance your tracking using Google Tag Manager.  In this course, you will learn fundamentals, learn how to deal with browser windows, HTML documents, and show you several use cases. If you are interested then check out, JavaScript for Marketing Analytics with Google Tag Manager course

 

Where to get more help with Google Tag Manager?

Learn and Master Google Tag Manager

 

Leave a Reply

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