Головна/Динамічна заміна e-mail та номера телефону на сайті за допомогою Google Tag Manager

чт, 14 червня 2018 р.

Динамічна заміна e-mail та номера телефону на сайті за допомогою Google Tag Manager

Оригінальна стаття була написана 14 червня 2018 року і йшлося в ній про передачу даних до Google Analytics Universal, але при переїзді блогу на нову CMS я вирішив оновити матеріал, до актуальної версії Google Analytics 4.

Диспетчер тегів Google дуже корисний інструмент, і з його допомогою можна не лише налаштовувати збір даних у Google Analytics 4. Наприклад, динамічна заміна контенту на сайті - це теж справа декількох десятків кліків в GTM.

Причин, з яких вам потрібно підміняти контент на сторінці динамічно безліч, нижче вкажу дві основні:

Підміна даних для відстеження джерела трафіку, з якого прийшов користувач. Дуже схоже працюють послуги call-tracking.
Підміна контенту як спосіб надання персоналізованої інформації різним сегментам користувачів.

У своїй роботі я нещодавно зіткнувся з першим. Завдання, яке стояло переді мною - відстежити, з якого джерела трафіку заходять користувачі, котрі пишуть листи на пошту, вказану на лендінгу. Але окрім цього в матеріалі, ми розберемо й інші способи заміни контенту.

Підміна e-mail адреси залежно від джерела трафіку на односторінковому сайті/лендингу
Підміна e-mail адреси на сайті за допомогою бібліотеки sourcebuster.js
Підміна номера телефону на сайті/лендингу

Для налаштування заміни нам знадобляться:

Змінні, в яких зберігатиметься інформація про те, з якого джерела трафіку користувач зайшов на сайт;
Тег типу Custom HTML (Користувацький тег HTML), який робитиме магію - замінюватиме контент.

Підміна e-mail адреси залежно від джерела трафіку на односторінковому сайті/лендингу

Припустимо, що у нас є два основних джерела трафіку: реклама у Facebook та Google Adwords (саме так на момент написання статті називався Google Ads), а також інші менш важливі джерела. Наразі на сайті відображається загальний e-mail для всіх джерел трафіку. Наприклад:

33.1 Example of displaying a general email on the website for all traffic sources

Щоб відстежувати ефективність реклами у Facebook та Google Ads, створюємо ще дві додаткові пошти, наприклад: facebook@domain.com та adwords@domain.com.

Далі створюємо дві змінні {{URL - utm_source}} і {{URL - utm_medium}}, в яких зберігатиметься інформація про рекламне джерело та канал.

33.2 Setting up a variable to store information about the advertising campaign source

33.3 Setting up a variable to store information about the advertising channel

ВАЖЛИВО! Рекламні кампанії повинні бути позначені UTM мітками.

На останньому кроці створюємо тег з назвою HTML - Replace E-mail типу Custom HTML (Користувацький тег HTML) наступного вигляду:

33.4 Custom HTML tag for dynamic email replacement

Нижче — код, який необхідно вставити на сайт, попередньо адаптувавши його під ваші потреби:

YOUR_EMAIL_SELECTOR — замініть на CSS-селектор потрібного елемента на вашій сторінці.

Якщо кілька елементів підпадають під цей селектор, переконайтеся, що обраний варіант охоплює саме ті елементи, які потрібно змінити. Для цього ви можете скористатися моїм розширенням PROANALYTICS, яке підсвічує всі елементи на сторінці, що відповідають введеному селектору.

your_email_class — вкажіть клас для стилізації нового елемента (за потреби).
adwords@domain.com та facebook@domain.com — замініть на актуальні e-mail адреси, які ви хочете показати.

javascript

<script>
  var utmSource = {{URL - utm_source}};
  var utmMedium = {{URL - utm_medium}};


  var selector = 'YOUR_EMAIL_SELECTOR';
  var newElement;


  if (utmSource === "google" && utmMedium === "cpc") {
    newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
  } else if (utmSource === "facebook" && utmMedium === "cpc") {
    newElement = '<a class="your_email_class" href="mailto:facebook@domain.com">facebook@domain.com</a>';
  }


  if (newElement) {
    var currentNode = document.querySelector(selector);
    if (currentNode) {
      currentNode.outerHTML = newElement;
    }
  }
</script>

Давайте розберемо поетапно, що робить цей код:

javascript

var utmSource = {{URL - utm_source}};
var utmMedium = {{URL - utm_medium}};

Ці рядки зберігають значення UTM-міток utm_source і utm_medium, які ми на попередньому етапі отримали за допомогою змінних Google Tag Manager.

javascript

if (utmSource === "google" && utmMedium === "cpc") {
  newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
}

Цей блок перевіряє, чи користувач прийшов з платного трафіку Google. Якщо так — формується HTML-елемент з потрібною адресою.

Друга частина коду аналогічна, тільки для трафіку з Facebook.

javascript

var currentNode = document.querySelector(selector);
if (currentNode) {
  currentNode.outerHTML = newElement;
}

У цьому фрагменті код знаходить перший елемент на сторінці за вказаним CSS-селектором та повністю замінює його новим HTML-елементом, який ми щойно сформували.

Тепер усі користувачі, які потраплять на лендинг, побачать різні e-mail адреси залежно від джерела, з якого вони прийшли.

Підміна e-mail адреси на сайті за допомогою sourcebuster.js та Google Tag Manager

Якщо ж у вас сайт, то доведеться ще трохи попрацювати, щоб заміна працювала як слід. Адже на поточному етапі наша підміна спрацьовує тільки для користувачів, які відразу потрапили на сторінку, де здійснюватиметься підміна, наприклад, сторінку “Контакти”.

Якщо користувач з нашої реклами потрапив на сторінку з товаром, а потім погулявши по сайту перейшов на сторінку "Контакти" - підміна не спрацює, адже get-параметри utm_source і utm_medium будуть відсутні.

Щоб зберегти інформацію про рекламне джерело та канал, ми можемо скористатись cookie або localStorage.

Скрипт наведений нижче якраз демонструє таке рішення. Як і з минулим рішенням - не забудьте вказати свої значення для YOUR_EMAIL_SELECTOR, your_email_class та вказати ваші мейли замість adwords@domain.com та facebook@domain.com

javascript

<script>
  function getQueryParam(name) {
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.search);
    return results ? decodeURIComponent(results[1]) : null;
  }

  function getUTMParams() {
    var utm_source = getQueryParam("utm_source");
    var utm_medium = getQueryParam("utm_medium");

    if (utm_source && utm_medium) {
      localStorage.setItem("utm_source", utm_source);
      localStorage.setItem("utm_medium", utm_medium);
    }
  }

  function getStoredUTM() {
    return {
      source: localStorage.getItem("utm_source"),
      medium: localStorage.getItem("utm_medium")
    };
  }

  function replaceEmailBasedOnUTM() {
    var utm = getStoredUTM();

    var selector = 'YOUR_EMAIL_SELECTOR';
    var newElement;

    if (utm.source === "google" && utm.medium === "cpc") {
      newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
    } else if (utm.source === "facebook" && utm.medium === "cpc") {
      newElement = '<a class="your_email_class" href="mailto:facebook@domain.com">facebook@domain.com</a>';
    }

    if (newElement) {
      var currentNode = document.querySelector(selector);
      if (currentNode) {
        currentNode.outerHTML = newElement;
      }
    }
  }

  getUTMParams();
  replaceEmailBasedOnUTM();
</script>

Давайте розберемо поетапно, що відбувається в цьому коді:

javascript

function getQueryParam(name) { ... }

Функція, яка витягує значення параметра з URL.

javascript

function getUTMParams() { ... }

Зчитує utm_source і utm_medium з URL, якщо вони є, і зберігає їх у localStorage. Це дає змогу використовувати ці значення на інших сторінках сайту, де параметри в URL уже відсутні.

javascript

function getStoredUTM() { ... }

Отримує значення utm_source і utm_medium із localStorage.

Зверніть увагу, це рішення вже є більш комплексним, тому ми не використовуємо додаткові кастомні змінні GTM, які були потрібні для попереднього варіанту.

javascript

function replaceEmailBasedOnUTM() { ... }

Ця функція відповідає за підміну email-елемента на сторінці залежно від джерела трафіку. Якщо користувач прийшов з Google Ads (google / cpc), буде показано один email, якщо з Facebook Ads — інший.

javascript

getUTMParams();
replaceEmailBasedOnUTM();

На завершення: при кожному завантаженні сторінки ми спочатку зберігаємо UTM (якщо вони є), а потім одразу виконуємо підміну email.

Тепер підміна e-mail спрацює незалежно від того, які сторінки відвідає користувач під час сеансу.

Рішення представлене вище надано в ознайомчих цілях. Воно покриває тільки випадки визначення трафіку з UTM міток. Але в реальному житті зазвичай є значна частина трафіку на сайт, не розміченого UTM. Наприклад, органічний трафік з пошукових або соціальних мереж. Джерело для такого трафіку визначається на основі значення document.referrer. Якщо на ваш сайт теж надходить такий трафік - обов'язково додайте обробку значень document.referrer в скрипт. Інакше може відбутись ситуація, коли користувач спочатку зайшов з Google Ads, потім через декілька днів перейшов по лінку в вашій групі фб, але ви все ще продовжуєте показувати йому мейл призначений для Google Ads.

Підміна номера телефону на сайті/лендингу

Зазвичай для підміни номера телефону на сайті використовуються сервіси call-tracking, але якщо з якихось причин ви не можете собі його дозволити, тоді це можна зробити вручну. Все, що нам потрібно, це замінити функцію replaceEmailBasedOnUTM з попереднього коду на функцію replacePhoneBasedOnUTM, код якої ви бачите нижче:

javascript

function replacePhoneBasedOnUTM() {
  var utm = getStoredUTM();

  var selector = 'YOUR_PHONE_SELECTOR';
  var newElement;

  if (utm.source === "google" && utm.medium === "cpc") {
    newElement = '<a class="your_phone_class" href="tel:+1234567890">+1 234 567 890</a>';
  } else if (utm.source === "facebook" && utm.medium === "cpc") {
    newElement = '<a class="your_phone_class" href="tel:+0987654321">+0 987 654 321</a>';
  }

  if (newElement) {
    var currentNode = document.querySelector(selector);
    if (currentNode) {
      currentNode.outerHTML = newElement;
    }
  }
}

Як бачите змін в коді не так вже й багато)

Не забудьте змінити тестові номера телефонів на свої реальні.

Тепер залишилося порахувати кількість листів/дзвінків на відповідні номери та можна виводити заповітне ROI по кожному джерелу. Якщо у вас залишилися питання або ви вважаєте цю статтю корисною – напишіть про це у коментарях.

Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.

AdvancedGoogle Tag ManagerJava Script

Автор

Макс Гапчук

Вебаналітик, Маркетолог