Change Html with Google Tag manager

When you would like to change the content or styling of your website, it’s possible to affect them with the Google Tag Manager. There are several Javascript functions that help to solve this.

There are many reasons why you would like to do this. Based on user interaction you could serve for example a custom alert or show a popup box to get new newsletter subscriptions. Or if you would like to A/B test with the Google tag manager, you could change colors and styling after reading this article. These are just two examples of usage, the possibilities are endless.

In my example, I’m going to change the styling of this blog post after a user clicks on a link. Use your own trigger to make it fit in your setup.

Add a new Custom Html tag to GTM:


This is the Google Tag Manager script i’ve used:

First, Try out my example to see what’s happening!

Click here to try me!  or Cancel the example

Activate event onclick:

What’s happening?

The script changes the Dom when the link is clicked. Our link activates an event that triggered our Custom Html tag.

From line 7 till 11 there are five style customizations for single tags given.

Line 14 till 27 represent two style customizations for multiple elements.

There is a difference between editing single elements and editing multiple elements at once. An element can exist on the page more than once. If you like to edit only one of them you have to set the number.

For example, on almost every web page there are links to other pages. We could use Javascript to select them all or just one. The found links on a page are retrieved in an array. This array stores the details for each link. Array numbering starts at zero. So, the first link is number 0, the second number 1, and so on.

Code explanation

If we would like to change only the third link we could use this code:

document.getElementsByTagName("a")[2].style.color = "yellow";

getElementsByTagName( ) -> Select all elements by the given tagname on a page.

"a" -> Select A elements, we could also use H1span or img elements. More info about Html elements.

[2] -> Selects the third link of the array.

color -> Set the color, you could also use other style objects. All available style object options are listed on

"yellow" -> Paints the third link yellow. (You could also use HTML colors here)

Line 7

Changes the font color of first Dom element with classname entry-title in red. In the source code class="entry-title". I am using getElementsByClassName. This retrieves multiple items, so if we would like to style change only one, we have to set the required result. In this case we need number one, so [0] is set to get the first value of the array.

Line 8

Changes the font color of first Dom element with classname entry-content (in my source code class="entry-content") in grey. It is possible to use Html Hex colors. Check out this Html color table.

Line 9

Change the text of the first found element with classname sidebar in New Text.

Line 10

This changes the background color of an element with id main. In my source code id=”main”. In this line i’m using getElementById (Notice: getElement<No plurality here>ById ). This is different from our function for class names. This javascript function only returns one value.

Line 11

Instead of searching for specific class names or id’s, we could also use tag names. Therefore we use our javascript function getElementsByTagName. This function also returns multiple values. In this case the background of our page will be painted yellow.

Line 14 till 20

If we would like to change multiple items on a page, than we have to loop through them. To change the font color of each link on our page we have to get all the links first. I have used getElementsByTagName('a') to store all links. They are stored in array variable a (var a).

To debug your code, you could use console.log(a);. This fuction sums up all found links on your page in the browser console. This function can be found by right clicking somewhere or pressing Ctrl + Shift + I.

inspect element

Click on the Console tab, and you’ll find your debug info.

console.log a

Next, we loop through our array with

The variable count is used to check when we have to stop our loop. Variable length is the number of links on our page. Each time our condition count is lower than length, the code between the { and } is executed. Besides that our count variable is increased by 1, so our loop won’t be executed infinite.

The first time we loop through our loop the font color of link 1 a[0] turns into green. The next time the second link a[1] turns into green, then the third link a[2] is painted green, an so on till the last link in our array.



Changing the Html of your page gives you nice opportunities. I will give some useful examples at a later time. Succes!


Was it interesting? Share it, so someone else can read this too!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

One thought on “Change Html with Google Tag manager”

  1. Dear Marthjin:

    I have one request, i don’t if i can use your trick.

    Basically, i want to dynamically change the links on my page according to the utm_source and utm_content cookies which i already stores.

    and it is better that i can manager the links through lookup table in GTM.

    Is it possible?

    Also i have write the requirement on Google tag manager G+ groups,
    here is the link,

Leave a Reply

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