Безкоштовно налаштуйте режим згоди на файли cookie за допомогою GTM

На відміну від старих добрих часів, все змінилося. Ми маємо просити наших користувачів дозволу відстежувати та націлювати їх, що особливо важливо для дотримання правил GDPR. У цій статті я спробую покроково пояснити, як безкоштовно налаштувати діалоговий банер запиту згоди щодо файлів cookie на вашому веб-сайті та активувати режим згоди на вашому сайті за допомогою Менеджера тегів Google. Насолоджуйтесь!

Активуйте режим згоди в Менеджері тегів Google

Перейдіть до «Адміністратор» > «Налаштування контейнера» та увімкнути огляд налаштувань режиму отримання згоди. Це активує режим згоди для контейнера. Якщо ви перейдете до розділу тегів, ви побачите невелику кнопку огляду згоди у верхньому правому куті, вона відображатиме налаштовані та неналаштовані теги для згоди.

Налаштуйте банер згоди на використання файлів cookie

Перше, що вам потрібно зробити, це вибрати CMP (платформу керування згодою). У цій статті ми будемо використовувати безкоштовне рішення. Ви можете легко створити банер згоди для свого веб-сайту, перейшовши за цим посиланням. 

Після того, як ви внесете свої зміни, він автоматично згенерує код, який можна використовувати для відображення банера згоди на вашому веб-сайті. 

Створіть спеціальний HTML-тег, який запускатиметься під час усіх переглядів сторінки (в ідеалі крок на початку завантаження контейнера). Додайте трігер на розміщення цього тегу на всіх сторінках

UPDATE

Можливо цей код не запрацює. У мене це сталося на моєму вордпресс сайті і що потрібно зробити щоб він запрацював.
Треба змінити 2 стрічки коду який ви отримаєте

Стрічка номер 4
Замінити: document.addEventListener(‘DOMContentLoaded’, function () {
На: window.onload = function () {

Стрічка номер 6
Замінити: });
На: };

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

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

У коді який ви додали раніше були наступні стрічки:

<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->

<a href="#" id="open_preferences_center">Update cookies preferences</a>

Додайте над цим кодом стильові таблиці наприклад як я надам у прикладі нижче, можете використати його як приклад (додано лише код у тегах <style></style>)

<!-- End Cookie Consent by FreePrivacyPolicy.com https://www.FreePrivacyPolicy.com -->
<style>
  #open_preferences_center {
    display:block;
    position:fixed;
    bottom:0px;
    right:150px;
    background:#cecece;
    border:1px solid #cecece;
  }
</style>
<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->
<a href="#" id="open_preferences_center">Update cookies preferences</a>

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

Поздоровляю! тепер у вас є банер згоди. Далі потрібно зробити так щоб він запрацював.

Вилучення типів згоди з файлів cookie

Майже кожен CMP або Cookie Banner створює файли cookie після того, як користувач приймає або відхиляє згоду. Ви можете легко побачити це в DevTools. Ось приклад із банером згоди, про який я згадував раніше:

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

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

Це означає, що нам потрібно створити п’ять різних змінних JavaScript. В ідеалі, якщо у вашому файлі cookie згоди немає значення для кожного , ви можете використовувати одне значення для різних типів згоди. Наприклад, у нашому прикладі банера файлів cookie ми створюємо файли cookie для чотирьох різних типів згоди, але ми використовуватимемо один із них для двох типів згоди.

• Перш за все, створіть змінну 1st-Party Cookie у GTM із назвою файлу cookie згоди

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

• Створіть спеціальні змінні JavaScript, щоб отримати кожен тип згоди

Ми створимо різні користувацькі змінні JS у GTM, щоб отримати кожен тип згоди. Оскільки наш банер із згодою на файли cookie надає лише чотири типи (функціональні, необхідні, таргетинг та відстеження), я створю чотири різні змінні. Я наведу код нижче для кожного типу які ви можете скопіювати. Будь ласка, створіть різні змінні для кожного з них, та скопіюйте код для кожної з них. Якщо ви використовуєте той самий банер файлів cookie на своєму веб-сайті, назвіть усі змінні наступним чином:

• ConsentCookie-necessary – кукі обов’язкові для вебсайту
• ConsentCookie-functional – кукі від яких залежить функціонал сайту
• ConsentCookie-targeting – кукі яки збирають системи рекламного таргетингу
• ConsentCookie-tracking – кукі відстеження потрібні для систем веб аналітики.

Код для кожної категорії:

function() {
  var consentTypes = {{Cookie - cookie_consent_level}}
  if (consentTypes == undefined) {
    return "denied"
  } else {
    consentTypes = JSON.parse({{Cookie - cookie_consent_level}})
    if (consentTypes["necessary"] == true) {
      return "granted"
    } else {
      return "denied"
    }
  }
}

function() {
  var consentTypes = {{Cookie - cookie_consent_level}}
  if (consentTypes == undefined) {
    return "denied"
  } else {
    consentTypes = JSON.parse({{Cookie - cookie_consent_level}})
    if (consentTypes["functionаl"] == true) {
      return "granted"
    } else {
      return "denied"
    }
  }
}

function() {
  var consentTypes = {{Cookie - cookie_consent_level}}
  if (consentTypes == undefined) {
    return "denied"
  } else {
    consentTypes = JSON.parse({{Cookie - cookie_consent_level}})
    if (consentTypes["targeting"] == true) {
      return "granted"
    } else {
      return "denied"
    }
  }
}

function() {
  var consentTypes = {{Cookie - cookie_consent_level}}
  if (consentTypes == undefined) {
    return "denied"
  } else {
    consentTypes = JSON.parse({{Cookie - cookie_consent_level}})
    if (consentTypes["tracking"] == true) {
      return "granted"
    } else {
      return "denied"
    }
  }
}

Цей блок коду створить массив даних з нашої змінної «Cookie – cookie_consent_level» для отримання всіх значень типу згоди. Він аналізуватиме їх як об’єкт JSON і повертатиме «granted», якщо значення «functionality» істинне, або «denied», якщо воно false або undefined. GTM приймає лише значення «granted» або «denied» для типів згоди. Створіть ці змінні за допомогою спеціального типу змінних JavaScript.

Налаштувати шаблон згоди

GTM вимагає шаблонів для ОТРИМАННЯ та ВСТАНОВЛЕННЯ параметрів згоди. Хоча цього можна досягти за допомогою команд бібліотеки gtag, це не гарантується документацією Google. Тому Google рекомендує використовувати шаблони Google Tag Manager. Ви можете знайти всі деталі в документації шаблону згоди Google.

Для цього ми будемо використовувати готовий шаблон Сімо Ахави. Перейдіть до розділу «Шаблони» в GTM і знайдіть шаблон тегу «consent» та додайте шаблон «Consent Mode (Google Tags)» від Сімо Ахави (Simo Ahava) до своєї робочої області.

Ми будемо використовувати цей шаблон для різних цілей, фактично у двох випадках. GTM потребує статусу «By default»(За замовчуванням) та «Update»(Оновлення) перед запуском чутливого до згоди тегу. Отже, ми будемо використовувати цей шаблон, щоб встановити статус згоди «By default». Крім того, коли користувач приймає банер згоди, нам потрібно використовувати його для оновлення статусу згоди на першій сторінці. Це зроблено для запобігання втраті будь-яких параметрів UTM або інформації про сторінку.

Створіть тег статусу згоди «за замовчуванням».

Створіть тег, вибравши тип тегу «Consent Mode (Google Tags)» та використавши спеціальну змінну JavaScript, яку ми створили раніше для кожного типу згоди. Перегляньте знімок екрана нижче.

Обов’язково виберіть «Consent Initialisation – All Pages» як тригер, оскільки це правильний тригер для встановлення конфігурацій згоди «За замовчуванням».

Створіть тег статусу згоди «Оновлення».

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

Важлива примітка. Ви повинні надіслати подію на рівень даних, якщо користувач натисне кнопку «Прийняти». Це дозволяє нам запускати тег оновлення. Додайте наступний код після коду банера згоди так як ви можете побічити на зображенні нижче:

var checkConsentBanner = setInterval(function(){
    var accBtn = document.querySelector(".cc-nb-okagree")
    if(accBtn!==null){
      accBtn.addEventListener("click",function(e){
        dataLayer.push({
          event:"consent_accepted"
        })
      })
      clearInterval(checkConsentBanner)
    }
  },100)

Спочатку створіть настроюваний тригер події. Ми надсилаємо подію «consent_changed» до рівня даних, коли користувач натискає кнопку «Прийняти». Використовуйте цей тригер для тегу «Оновлення згоди».

Не забудьте вибрати опцію «Push dataLayer Event», щоб отримати подію після повного оновлення згоди. Це надішле подію gtm_consent_update на рівень даних. Ми використовуватимемо цю подію для активації наших тегів, коли згода оновлюється на тій самій сторінці. В іншому випадку вам доведеться чекати, доки користувач перейде на іншу сторінку, щоб активувати чутливі до згоди теги, оскільки тег «Consent – Update» оновлює лише налаштування згоди. Теги, чутливі до згоди, не можуть прослуховувати зміни згоди без подій. Таким чином, ми можемо оновити налаштування згоди, коли користувач приймає згоду.

Налаштуйте параметри згоди для своїх тегів

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

Оскільки Google Analytics потрібна згода для «аналітики», ми використовуватимемо значення «analytics_storage», яке встановлюємо в тегах оновлення згоди та стандартних тегах згоди. Крім того, додайте тригер спеціальної події «consent_update » до цього тегу, щоб відстежувати останні зміни згоди.

Виконуючи ці кроки, ви зможете успішно налаштувати та керувати банером згоди на файли cookie та налаштуваннями згоди за допомогою Менеджера тегів Google та абсолютно безкоштовно.