Налаштування розширеного відстеження конверсій для сайтів на OpenCart за допомогою Google Tag Manager

В одній з попередніх статей ми писали про те, що таке розширене відстеження конверсій (Enhanced conversions) і для чого вого потрібне.

Нагадаємо, що для сайтів на OpenCart пропонуємо два варіанти налаштування розширеного відстеження конверсій:

Перший і найпростіший метод – встановити плагін “Ecommerce Events&Feeds for Google&Facebook (v2)”, розроблений спеціально для магазинів на OpenCart. Використання плагіну забезпечить автоматичну передачу розширених конверсій в Google Ads.

Сьогодні ж поговоримо про другий метод – налаштування розширеного відстеження конверсій для сайтів на OpenCart за допомогою Google Tag Manager (далі GTM).

Перед тим, як перейти до налаштувань в GTM, власникам сайтів на OpenCart необхідно зробити ряд підготовчих дій:

1. У рекламному кабінеті Google Ads попередньо необхідно створити користувацьку конверсію purchase, яка передається напряму із сайту в обхід Аналітики. Задайте зрозумілу вам назву цієї конверсії (crm_purchase або purchase_website), переведіть в статус другорядної та перенесіть в категорію “Інше”, щоб уникнути дублювання даних. Відповідно, у вашому рекламному кабінеті в розділі “Цілі” => “Підсумок” буде 2 конверсії Purchase: одна – імпортована з Google Analytics 4, друга – кастомна, яка передається напряму з сайту, для якої в подальшому і будемо робити додаткові розширені налаштування.

Детальну відеоінструкцію про те, як створити користувацьку конверсію crm_purchase власникам сайтів на Хорошоп, WordPress, OpenCart та OkayCMS знайдете на Youtube-каналі “K2 – реклама для інтернет-магазинів”.

2. У налаштуваннях конверсії в Google Ads необхідно активувати “Розширене відстеження конверсій”. 

3. Налаштування розширеного відстеження конверсій будемо робити через Mенеджер тегів Google (Google Tag Manager, GTM). Тому в рекламному кабінеті Google Ads в розділі Цілі => Налаштування необхідно:

1) прийняти умови щодо даних клієнтів; 

2) увімкнути Розширене відстеження конверсій від потенційних клієнтів та обрати GTM; 

3) активувати Розширене відстеження конверсій та обрати GTM.

4. Також необхідно перевірити чи встановлено на вашому сайті маску для правильного введення номера телефону. Тут може бути 3 сценарії: 

– встановлена маска з дужками у форматі +38(000)111-22-33. Додаткові дії не потрібні. 

– встановлена маска для введення номера телефону без дужок у форматі +380001112233. Додаткові дії не потрібні.

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

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

Налаштування розширених конверсій в GTM

Вказані нижче налаштування підійдуть для сайтів, у яких після відправки форми оформлення замовлення, сторінка перезавантажується. 

Відкриваємо Google Tag Manager і виконуємо наступні дії:

1. Створюємо новий тег ”HTML_mail+phone_site”, за допомогою якого витягнемо телефон та електронну адресу користувачів з форми відправки замовлення на сайті, змінимо формат номера телефону за стандартом E.164, згідно до вимог Google і закодуємо дані клієнтів, використовуючи алгоритм SHA256. 

• Для цього переходимо в Робочу область => “Теги” і натискаємо “Створити”.

• Натискаємо на поле Конфігурація тегу і обираємо “Користувацький тег HTML”. 

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

Тож переходимо на сайт на сторінку, де з’являються необхідні дані, надані користувачами. Ці дані можуть відображатися на сторінці подяки або тій, що їй передує, наприклад на сторінці надсилання форми (або підтвердження замовлення), яка відкривається перед сторінкою підтвердження покупки.  

Клацаємо правою кнопкою миші на сторінці та обираємо “Переглянути код” (або натискаємо функціональну клавішу F12). 

У вкладці Elements беремо курсор: 

а) наводимо на поле “Телефон” за копіюємо параметр телефону. В нашому випадку це customer[telephone].

б) наводимо на поле “Електронна пошта” за копіюємо параметр email. У нашому випадку це customer[email].

Тепер в скрипті замінюємо параметри для телефону. 

У полі var phone_input = document.getElementsByName(‘customer[telephone]‘); //замість customer[telephone] вводимо власні дані з поля “Телефон” форми на сайті. 

Та замінюємо параметри для email. 

У полі var email_input = document.getElementsByName(‘customer[email]‘); // замість customer[telephone] вводимо власні дані з поля “Телефон” форми на сайті. 

Додаємо відредагований скрипт в поле HTML нового тегу. Таким чином ми повідомимо тегу розширеного відстеження конверсій, які дані слід хешувати й надсилати в Google.

<script>
    /* === скрипт оброблює дані отримані з полей контактної форми при натисканні на кнопку форми "Надіслати" та записує зчитані дані в куки, що дає змогу отримати значення глобальних змінних навіть після перезавантаження сторінки ===*/


    /* === функція для запису cookie ===*/
    function writeCookie(name, val) {
      document.cookie = name+"="+val;
    }
    /* === функція для запису cookie ===*/

    /* === функція для зчитування cookie ===*/
    function readCookie(name) {
      var matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
      ));
      return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    /* === функція для зчитування cookie ===*/

    /* === функція для перевірки email ===*/
    function validateEmail(email) {
      var re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
      return re.test(String(email).toLowerCase());
    }
    /* === функція для перевірки email ===*/

    /* === функція для шифрування данних за sha256 ===*/
    var sha256 = function sha256(ascii) {
      function rightRotate(value, amount) {
          return (value>>>amount) | (value<<(32 - amount));
      };
      var mathPow = Math.pow;
      var maxWord = mathPow(2, 32);
      var lengthProperty = 'length'
      var i, j; // Used as a counter across the whole file
      var result = ''
      var words = [];
      var asciiBitLength = ascii[lengthProperty]*8;
      var hash = sha256.h = sha256.h || [];
      var k = sha256.k = sha256.k || [];
      var primeCounter = k[lengthProperty];
      var isComposite = {};
      for (var candidate = 2; primeCounter < 64; candidate++) {
          if (!isComposite[candidate]) {
              for (i = 0; i < 313; i += candidate) {
                  isComposite[i] = candidate;
              }
              hash[primeCounter] = (mathPow(candidate, .5)*maxWord)|0;
              k[primeCounter++] = (mathPow(candidate, 1/3)*maxWord)|0;
          }
      }
      ascii += '\x80' // Append Ƈ' bit (plus zero padding)
      while (ascii[lengthProperty]%64 - 56) ascii += '\x00' // More zero padding
      for (i = 0; i < ascii[lengthProperty]; i++) {
          j = ascii.charCodeAt(i);
          if (j>>8) return; // ASCII check: only accept characters in range 0-255
          words[i>>2] |= j << ((3 - i)%4)*8;
      }
      words[words[lengthProperty]] = ((asciiBitLength/maxWord)|0);
      words[words[lengthProperty]] = (asciiBitLength)
      for (j = 0; j < words[lengthProperty];) {
          var w = words.slice(j, j += 16);
          var oldHash = hash;
          hash = hash.slice(0, 8);
          for (i = 0; i < 64; i++) {
              var i2 = i + j;
              var w15 = w[i - 15], w2 = w[i - 2];
              var a = hash[0], e = hash[4];
              var temp1 = hash[7]
                  + (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1
                  + ((e&hash[5])^((~e)&hash[6])) // ch
                  + k[i]
                  + (w[i] = (i < 16) ? w[i] : (
                          w[i - 16]
                          + (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15>>>3)) // s0
                          + w[i - 7]
                          + (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2>>>10)) // s1
                      )|0
                  );
              var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
                  + ((a&hash[1])^(a&hash[2])^(hash[1]&hash[2])); // maj
              hash = [(temp1 + temp2)|0].concat(hash);
              hash[4] = (hash[4] + temp1)|0;
          }
          for (i = 0; i < 8; i++) {
              hash[i] = (hash[i] + oldHash[i])|0;
          }
      }
      for (i = 0; i < 8; i++) {
          for (j = 3; j + 1; j--) {
              var b = (hash[i]>>(j*8))&255;
              result += ((b < 16) ? 0 : '') + b.toString(16);
          }
      }
      return result;
    };
    /* === функція для шифрування данних за sha256 ===*/

    var global_sha256_email_address = ''; // глобальна змінна для пошти
    var global_sha256_phone_number = ''; // глобальна змінна для телефону

    /* === перевіряємо, якщо в куках є дані для глобальних змінних, то пишемо значення в глобальні змінні === */

    var cookie_email = readCookie('global_sha256_email_address');
      if(cookie_email!='undefined' && cookie_email!='')
        global_sha256_email_address = cookie_email;

    var cookie_phone_number = readCookie('global_sha256_phone_number');
      if(cookie_phone_number!='undefined' && cookie_phone_number!='')
        global_sha256_phone_number = cookie_phone_number;

    /* === перевіряємо, якщо в куках є дані для глобальних змінних, то пишемо значення в глобальні змінні === */

      /* === обробляємо email ===*/
      var email_input = document.getElementsByName('customer[email]'); // тут потрібно вказати ім'я поля з поштою 
      if(email_input.length>0){
        var email_address = email_input[0].value; 
        if (email_address!='' && validateEmail(email_address)) {
          var sha256_email_address = sha256(email_address);
          global_sha256_email_address = sha256_email_address; // запис у глобальну змінну
          writeCookie('global_sha256_email_address',sha256_email_address,2); // запис у кукі
        } else {
          global_sha256_email_address = ''; // запису у глобальну змінну
          writeCookie('global_sha256_email_address','',2); // запис у кукі
        }
      }
      /* === обробляємо email ===*/

      /* === обробляємо phone ===*/
      var phone_input = document.getElementsByName('customer[telephone]'); // тут потрібно вказати ім'я поля з телефоном
      if(phone_input.length>0){
        var phone_number = phone_input[0].value; 
        if(phone_number!=''){
          phone_number = phone_number.replace(/[\ \-\)\(\+]/g, '').trim();
          if(phone_number.match(/^\d+$/) && phone_number.length>=12 && phone_number.length<=14){
            phone_number = '+' + phone_number;
            var sha256_phone_number = sha256(phone_number);
            global_sha256_phone_number = sha256_phone_number; // запис у глобальну змінну
            writeCookie('global_sha256_phone_number',sha256_phone_number,2); // запис у кукі
          } else {
            global_sha256_phone_number = ''; // запис у глобальну змінну
            writeCookie('global_sha256_phone_number','',2); // запис у кукі
          }
        }
      }
      /* === обробляємо phone ===*/ 
    // обробка даних з форми
  </script>

У ролі тригера обираємо Purchase або Кнопка_оформлення замовлення, вводимо назву тегу “HTML_mail+phone_site” і натискаємо “Зберегти”. 

Для подальших налаштувань створимо необхідну змінну, для чого переходимо в розділ “Змінні” і натискаємо “Створити”. 

У полі “Конфігурація змінної” обираємо “Спеціальна змінна JavaScript”.

У полі “спеціальний сценарій  JavaScript необхідно прописати наступний код:

function () {
return {
"email": global_sha256_email_address ,
"phone_number": global_sha256_phone_number
}
}

Задаємо зрозумілу нам назву змінної “JS_mail+phone” і натискаємо “Зберегти”.

3. Рухаємось далі і доповнюємо наш Тег Відстеження конверсій в Google Ads необхідними параметрами, щоб відстежувати телефон та e-mail клієнтів.

4. Відкриваємо його та клікаємо в області “Конфігурація тегу”, щоб активувати налаштування. Ми вже зазначили ідентифікатор та мітку конверсії, налаштували передачу цінності, ідентифікатору трансакції та валюти. Тепер доповнимо ці дані додатковою інформацією про користувача.

Та створюємо нову змінну.

Задамо назву змінної User_provided_data (можете дати будь-яку зручну для вас назву). В полі “Конфігурація змінної” обираємо “Code”. В полі “Джерело даних” обираємо раніше створену змінну “JS_mail+phone” і натискаємо “Зберегти”.

Переглядаємо внесені зміни і тиснемо “Зберегти”.

5. Коли всі необхідні параметри для розширеного відстеження конверсії заповнено, зберігаємо оновлений тег “Відстеження конверсій в Google Ads” і публікуємо контейнер в GTM, щоб внесені зміни вступили в силу.

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

Переходимо в GTM Робоча область Попередній перегляд. 

Вводимо посилання на сайт та натискаємо Підключитись. 

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

Повертаємось в GTM, знаходимо подію Purchase, бачимо, що спрацював наш тег GADS_crm_purchase, відкриваємо його та перевіряємо чи коректно передані необхідні дані. 

Як бачимо на скрині вище, завдяки виконаним розширеним налаштуванням, тег Відстеження конверсій в Google Ads тепер передає телефон та електронну пошту покупця в хешованому вигляді.

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

Через деякий час у рекламному кабінеті Google Ads статус конверсії purchase_website стане “Активно” та висвітиться повідомлення, що Розширене відстеження конверсій увімкнено. 

У розділі Діагностика конверсій зʼявиться повідомлення: “Налаштування розширеного відстеження конверсій увімкнено й повністю оптимізовано”. 

Висновки

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

У разі повного відключення сторонніх файлів cookies ми не ризикуємо втратити цінні дані про дії користувачів.

Корисні посилання

Всі необхідні скрипти по налаштуванню розширеного відстеження конверсій для сайтів на OpenCart знайдете за посиланням. 

Інформацію про те, як легко налаштувати розширене відстеження конверсій для сайтів на OpenCart за допомогою плагіну “Ecommerce Events&Feeds for Google&Facebook (v2)”, знайдете тут.

Інформацію про те, як легко налаштувати розширене відстеження конверсій для сайтів на WordPress за допомогою плагіну “Ecommerce Events&Feeds for Google&Facebook (v2)”, знайдете тут.

Інформацію про те, як налаштувати розширене відстеження конверсій для сайтів на Хорошоп знайдете за посиланням.

Інструкцію з налаштування розширених конверсій для сайтів на Okay CMS знайдете за посиланням.

Інструкції з налаштування розширених конверсій для сайтів на WordPress за допомогою Google Tag Manager тут.