Pavel Koryakin , 5 Марта 2018

Script for substitution of content on the site through UTM tags

How to set up dynamic replacement of almost any element on the site. Just using a simple script and Google Tag Manager.


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)

The Chrome 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

Open code in Chrome

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

Code definition

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

Selector copy

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.

Creating new tag

Select Custom HTML.

Tag type selection

Paste the script code.

Adding a script

As a trigger, select All Pages.

Trigger selection

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.

New trigger DOM

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

Saving script

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.

Subscribe to Facebook, so you don't miss new articles!
Best articles
Similar articles
Integration of the client and the agency HOWTO
Integration of the client and the agency
In the article we will tell you about our integration setup between the client and the agency, and how communications are built.
How to do web analytics for SaaS through Google Analytics: introducing and tracking funnels HOWTO
How to do web analytics for SaaS through Google Analytics: introducing and tracking funnels
I found that in several SasS projects, proper analytics were not set up to track and maintain funnels. To solve these problems, we chose Google Analytics.
Free End-to-End Analytics in 20 minutes: Google Sheets + Google Analytics + Zapier HOWTO
Free End-to-End Analytics in 20 minutes: Google Sheets + Google Analytics + Zapier
Hi! We have figured out an end-to-end analytics solution for small companies. This article is meant for all internet marketing professionals.
Script for substitution of content on the site through UTM tags HOWTO
Script for substitution of content on the site through UTM tags
How to set up a dynamic replacement of almost any element on the site. Just using a simple script and Google Tag Manager.
Stretch ceilings case Case stadies
Stretch ceilings case
There are 1000 companies competing in stretch ceilings: from independent contractors to federal-level companies. However, there are only 10 spots in contextual advertising, and they buy 80% of all traffic. The rest collect crumbs. What distinguishes successful companies?
to read our blog

Get your Google Ads audit

After you leave a request: interview ~15 minutes → guest audit access ~15 minutes → audit within 2-4 days → proposal approval → first iteration start. In our experience, it is realistic to get the process rolling in 2-3 days.

Project manager Alex
Alex

Project manager



Write to — info@1jamagency.com or skype — jam.agency