Script for substitution of content on the site through UTM tags

Before we go into the article, we will give you the final result right away - the latest version of the scripts is at GitHub

In this article, I will tell you how to use a free script that you can use to set up automatic substitution of the heading and other elements of the website for keywords in a few minutes without programming skills.

Right away we give you the script with minimal instructions, which with some adjustments can be placed in GTM or directly to the site. If you do not understand how it works, then read on.

// Add utm_replace UTM-tag to the link in the advertising campaign, for example
//site.com/?utm_campaign=name&utm_replace=newyork

// newyork, this is a heading alias that corresponds to a long heading, for example
// newyork, corresponds to «Towing service in New York!»
var content = {
    newyork: 'Towing service in New York!',
    newark: 'Towing service in Newark!',
    yonkers: 'Towing service in Yonkers!',
};

//  Here you need to insert a selector between single quotes 
var selector = '#manager > div > div.title > div'; 
 

// Do not change anything further, this is the replacement script
function replacer(content) {
    var utm = /utm_replace=([^&]*)/g.exec(document.URL)[1]; 
    if (utm in content) {
        document.querySelector(selector).innerHTML=content[utm];
    } else {
        console.log('Content directory does not have such utm tag');
    };
};
 
replacer(content);

How it works

Correspondence between UTM tag and Heading

We add a new UTM tag utm_replace to advertisement links (what are UTM tags) and we specify the heading alias as the value, which will be substituted using utm_replace=newyork.

Let us see how this is implemented.

var content = {
    newyork: 'Towing service in New York!',
    newark: 'Towing service in Newark!',
    yonkers: 'Towing service in Yonkers!',
};

This is a kind of dictionary containing aliases (newyork, newark, yonkers) and values, i.e. headings that should be substituted on the site.

For example, you put this label in a contextual ad link, the user navigates through it, the script sees the label and inputs the corresponding heading in the right place.

There are some conditions:

1. The alias should be without spaces in English, but you can use underscores, for example, newyork_manhattan.
2. Before the alias, there should be four spaces, as in the sample code.
3. After the alias there must be a colon (:).
4. The long heading must be enclosed in single quotes ' '.
5. After the long heading, there must be a comma (,).

Example

var content = {
    example_with_line_break: 'A break in heading to new line<br/> in New York!',
    example_with_html: '<h1>Can be inserted directly with HTML</h1>',
    example_with_image: '<img src=”link to image”>',
};

Where on the Page to Replace the Heading

There is a thing called a — selector — it determines the path to the element in the website code. Copy it from the browser and paste into the line var selector = 'here'

var selector = '#block-new1066 > p > span > strong > span > span';

Getting a selector is easy. Open the website in Google Ghrome, turn on the inspector (View > Developer > Web Inspector)

If you have a different browser, google «how to enable the web inspector in my browser».

Next, in the inspector, click on the arrow, we point to the heading that we want to replace

At the same time, the code of this element will be highlighted in the window on the right.

In the code, we right-click on the selection and copy the Copy > Copy selector.

Paste into the script.

var selector = 'insert between single quotes here';

That's it, for here down goes the function which does its thing.

How to Install the Script on the Site

There are two ways: set the code before the closing tag </body> or through the Google Tag Manager. Let's consider the second method

First, find out how to install Google Tag Manager on a site and why it is needed; the algorithm is similar to installing an Analytics code. Suppose you installed it and you are on the main screen. Go to the «Tags» section and create a new tag.

Select Custom HTML.

Paste the script code.

As a trigger, select All Pages.

And we add (click plus sign +) one more trigger DOM Ready trigger. This means that our script will only start to work after the entire page has loaded.

That's it, save the tag by clicking Save.

Save and publish.

Pros and Cons of the Script

The script has one drawback: the substitution only works if there is a UTM tag. Therefore, if the user then goes to the same page via a link without a UTM tag, then the heading will not be saved, but we will solve this issue below by making the code more complicated.

But there are more Pros:

• quick;
• free;
• easy to figure out;
• no programming skills needed;
• perfect for landing pages.

Let's Get Creative with How Else it Can be Used

• change the phone number for example for Google Ads search network campaigns;
• replace picture;
• change the city;
• change headings depending on keywords;
• change with dynamic parameters.

How to Replace Several Headings and a Picture at Once

If you need to change several elements, for example, a heading, a phone number and a picture, the code becomes more complicated.

The principle remains the same, but the difference is that instead of a single heading, we specify [{code:heading},{code:phone number},{code:picture}], to replace several elements at once. In the selector field, insert the selector, and in the content field, insert the heading. Everything else works the same.

<script>
var content = {
    coctail: [
    	{
    	selector: '#manager > div > div.title > div',
    	content: 'Alex is glad you figured out how it works!'
    	},
    	{
    	selector: '#manager > div > div.entry',
    	content: '<img width="420" alt="coctails" src="/upload/medialibrary/f47/f47abc04c6893dbb6044bd7921ff75ac.jpg" height="67" title="Coctails">'
    	}
    ],
    newyork: [
        {
        selector: '#towns > div',
        content: 'New York number'
        },
        {
        selector: '#manager > div > div.title > div',
        content: 'New York version of the site'
        }
    ],
    headline: [
        {
        selector: '#manager > div > div.title > div',
        content: 'Replaces only the heading'
        }
    ]
};
 
function replacer(content) {
    var utm = /utm_replace=([^&]*)/g.exec(document.URL)[1]; 
    if (utm in content) {
        for (i in content[utm]) {
        	document.querySelector(content[utm][i]['selector']).innerHTML=content[utm][i]['content'];
        };
    } else {
        console.log("Content directory does not have such utm-tags");
    };
};
replacer(content);
</script>

How to Continue to Replace Content in Subsequent Transitions without UTM-tag

In the above scripts, the problem is that the script only works if there is a UTM tag in the link. This can be corrected by recording the aliases of the content in the browser’s cookie. So, within 30 days, the user's content will automatically change according to the UTM tag from which he originally came.

In order not to make the article too long with actual code, we published it on GitHub and also update it there. This script is used in the same way as described above.

Script Use Cases

1. On rbmedservice.com, for product range search queries «buy mindray dp 50» we substituted the heading with «Mindray DP-50 in stock with delivery from 1 to 3 days» and the conversion almost doubled from 6 to 11%;
2. For klaasistuudio.ee, for product size queries we substituted the heading. For example, we had a search query «shower door 120 185» and we substituted the heading «Shower door 120x185 in 7 days for $725 with free delivery», the conversion increased from ≈3% to ≈5%;
3. On small projects where dynamic call tracking does not pay off, we replace the phone number depending on traffic channels so that at the end of the period we can count how many calls were there.

Thanks for reading, I hope that the article will be of real benefit. Send your requests, I can modify the script, but not complicate it.