Pavel Koryakin , 5 Марта 2018

Script for the substitution of content on the site for UTM-tags

How to customize the dynamic substitution of virtually any element on the site. You just need to deal with 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 which 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. Basically, this is a free analogue of Yagla.

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.ru/?utm_campaign=name&utm_replace=moscow

// moscow, this is a heading alias that corresponds to a long heading, for example
// moscow, corresponds to «Order a tow truck in Moscow!»
var content = {
    moscow: 'Order a tow truck in Moscow!',
    kazan: 'Order a tow truck in Kazan!',
    spb: 'Order a tow truck in St. Petersburg!',
};

//  Here you need to insert a selector between single quotes http://joxi.ru/GrqZodptNMNlWm
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=moscow.

Let us see how this is implemented.

var content = {
    moscow: 'Order a tow truck in Moscow!',
    kazan: 'Order a tow truck in Kazan!',
    spb: 'Order a tow truck in St. Petersburg!',
};

This is a kind of dictionary containing aliases (moscow, kazan, spb) 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 in puts 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, moscow_russia.
  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 = {
    primer_s_perenosom: 'A break in heading to new line<br/> in Moscow!',
    primer_s_html: '<h1>Can be inserted directly with HTML</h1>',
    primer_s_kartinkoy: '<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)

Веб-инспектор в Chrome

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

Открыть код в Chrome

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 a Metrics or Analytics code. Suppose you installed it and you are on the main screen. Go to the «Теги» 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.

Новый триггер DOM

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

Сохранение скрипта

Save and publish.

Публикация тега

Example of How it Works

You can go to our website via the link 1jam.ru/?utm_replace=headline and instead of the standard heading you will get:

Пример лендинга с заменой

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 phone number for example for AdWords use one but for Яндекс.Директа another;
  • 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: 'Sasha is pleased with you!'
    	},
    	{
    	selector: '#manager > div > div.entry',
    	content: '<img width="420" alt="coctails" src="/upload/medialibrary/f47/f47abc04c6893dbb6044bd7921ff75ac.jpg" height="67" title="Coctails">'
    	}
    ],
    moscow: [
        {
        selector: '#towns > div',
        content: 'Moscow number'
        },
        {
        selector: '#manager > div > div.title > div',
        content: 'Moscow 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>

For example, when you click on the link 1jam.ru/?utm_replace=moscow heading and number change.

Пример лендинга с заменой 2

And at this link 1jam.ru/?utm_replace=coctail the heading and the picture change.

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 rusbeltlp.ru site, for product range search queries of the form «tape tk 200 buy,» we substituted the heading with «Buy tape TK 200 for 40000 rubles with delivery in 2 days» and the conversion almost doubled from 6 to 11%.
  2. For zhby-ufa.rf site, for product name queries we substituted the headings and pictures. For example, we had a search query «prices FBS 24 2380 300 580» and we substituted the heading «Delivery of FBS 24-3-6 tons 2380 × 300 × 580 per day for 2300 rubles», the conversion reached a fantastic 35%, but that was ~4 years ago.
  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!
Лучшие материалы
Similar articles
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 are a contextual advertising company 1jam.ru and we have figured out an end-to-end analytics solution for small companies. This article is meant for all internet marketing professionals.
Script for the substitution of content on the site for UTM-tags HOWTO
Script for the substitution of content on the site for UTM-tags
How to customize the dynamic substitution of virtually any element on the site. You just need to deal with a simple script and Google Tag Manager.
to read our blog

Get a proposal

After you leave a request: interview ~15 minutes → guest audit access ~15 minutes → audit within 2 days → proposal approval → first iteration start. In our experience, it is real to start doing something in 2-3 days.

Менеджер проектов Александр
Alexander

Project manager



Write to — info@1jam.ru , skype — jam.agency , or call — +1 (332) 208-14-02