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

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

Ви ж не думаєте, що зможете зібрати ці дані без сторонньої допомоги, чи не так?

Отже, сьогодні ми допоможемо вам налаштувати Google Tag Manager для кращого відстеження даних з допомогою розширення Magento 2 Google Tag Manager. В цій статті ви також знайдете відеоінструкцію з налаштуваннями.

Та спочатку давайте розберемось що ж це таке Google Tag Manager.

Що таке Google Tag Manager?

Google Tag Manager (GTM) — це безкоштовна система керування тегами, розроблена Google, щоб допомогти вам керувати маркетинговими тегами магазину з одного інтерфейсу без будь-яких змін коду.

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

Крім того, вам не потрібно додавати теги вручну або застосовувати технічні знання JavaScript. GTM дозволяє додавати тег контейнера (container tag) на ваш сайт і вносити всі зміни та налагодження безпосередньо з програми.

І ви можете налаштувати не тільки теги відстеження Google Analytics. Це можуть бути також теги будь-якої сторонньої програми, як-от Facebook Pixel, Google Ads, Microsoft Bing та інші.

GTM працює з 3-ма елементами:

  • Теги (tags) — фрагменти коду, реалізовані в структурі вашої сторінки (в основному, код JS).
  • Тригери (triggers) — визначають, де і коли виконувати теги відстеження.
  • Змінні (variables) — зберігають інформацію, яку використовують тригери та теги.

Відповідно до цих елементів визначають 3 етапи роботи Google Tag Manager.

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

Переваги Google Tag Manager

Якщо хтось з вас все ще не зрозумів, коли це стає в нагоді, ми хочемо перерахувати переваги, які пропонує Google Tag Manager:

  • GMT допомагає персоналізувати вашу маркетингову кампанію.
  • Цей інструмент позбавляє вас необхідності звертатися до розробника щоразу, коли потрібно вносити зміни у тегах.
  • Під час впровадження тегів немає помилок, оскільки вони додаються програмою, а не вручну.
  • GMT зі всіма збереженими даними — це чудова перевага для Google Analytics.

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

Нарешті ми підходимо до налаштувань.

Як додати Google Tag Manager у Magento 2?

Щоб налаштувати Google Tag Manager у Magento за допомогою розширення Google Tag Manager в Magefan, вам не потрібно буде редагувати жодних HTML шаблонів або отримувати коди відстеження. Ми просто отримаємо ідентифікатори відстеження з GTM і GA4 і вставимо їх в адмін панель.

Давайте починати?

1. Налаштуйте обліковий запис Google Tag Manager і GTM Container

Ввійдіть у акаунт Google Tag Manager та створіть новий акаунт, якщо ви досі не створили його.

Create Google Tag Manager Account

Задайте Account Name та виберіть Country. Вкажіть назву контейнера – Container – що являє собою описову назву, яка використовується для пов’язування контейнера з вашим веб-сайтом, і виберіть Web для цільової платформи.

Google Tag Manager Configuration

Примітка: оскільки кожен контейнер пов’язаний з одним веб-сайтом, у вашому обліковому записі потрібен лише один контейнер. Якщо ж ви керуєте Magento з кількома веб-сайтами, вам знадобляться окремі контейнери.

2. Отримайте Public ID, Account ID та Container ID

Щоб отримати будь-який з ідентифікаторів, необхідних для налаштування Google Tag Manager для Magento, вам спочатку потрібно перейти на домашню сторінку GTM.

  • Public ID

Натисніть на Container name на головній сторінці GTM. Потім перейдіть у вкладку Admin і знайдіть його біля назви контейнера.

GTM Public ID

  • Account ID

Перейдіть на сторінку контейнера та знайдіть його в адресі сторінки у браузері після /accounts/.

GTM Account ID

  • Container ID

Відкрийте контейнер на домашній сторінці GTM і знайдіть ID контейнера в адресі сторінки у браузері після /containers/.

GTM Container ID

3. Отримайте Measurement ID з Google Analytics 4

Оскільки розширення Magento 2 Google Tag Manager має знати, куди ви надсилаєте зібрані дані, вам потрібно отримати measurement ID з GA4 і вказати його в налаштуваннях розширення.

Спочатку перейдіть на домашню сторінку GA і виберіть GA4 property, яку ви хочете використовувати, щоб переглянути звіти про продуктивність вашого магазину.

Google Analytics 4 Property

Потім перейдіть у Admin (gear icon) > Data Streams > Web stream details та знайдіть свій Measurement ID.

Google Analytics Measurement ID

4. Вставте ідентифікатори GTM у свій магазин Magento

Примітка: якщо ви раніше використовували скрипт відстеження GTM, перейдіть у Content > Design > Configuration, знайдіть веб-сайт, для якого ви використовували скрипт, і видаліть його з розділу HTML Head > Scripts and Style Sheets.

Підіть у Stores > Configuration > Magefan Extensions > Google Tag Manager > Web Container і вставте GTM IDs у відповідну секцію. 

Set up Google Tag Manager in Magento 2

Примітка: якщо ви використовуєте Stape.io або будь-які інші кастомні завантажувачі GTM, виберіть Head Script і Body Noscript у полі Installation Method.

Після цього ввімкніть Google Analytics 4 і вставте туди Measurement ID. Збережіть налаштування після того як закінчите.

Google Analytics in Magento 2

Примітка: на основі вашого плану для розширення Google Tag Manager ви зможете збирати різні дані. Magento 2 Google Tag Manager Plus дозволяє відстежувати більше подій.

5. Створіть теги GTM

Щоб відстежувати події у вашому магазині Magento, вам потрібно створити теги, тригери та змінні в обліковому записі GTM. Але оскільки розширення Magefan Google Tag Manager для Magento 2 спрощує роботу, все, що вам потрібно, це імпортувати попередньо визначені теги з Magento.

Для цього перейдіть у Stores > Configuration > Magefan Extensions > Google Tag Manager > Export Container і натисніть кнопку Generate JSON Container & Download File.

Export Google Tag Manager Container

Після збереження файлу перейдіть у домашню сторінку GTM > Admin і натисніть Import Container.

Import Google Tag Manager Container

Потім виберіть файл для імпорту, виберіть workspace і визначте, чи потрібно overwrite чи merge вибрану workspace із вибраним контейнером, і виберіть workspace (зазвичай це default).

Import JSON container into GTM

Нарешті, вам буде надано перегляд нових, змінених і видалених тегів GTM, тригерів і змінних для підтвердження.

Updated GTM Tags and Triggers

6. Перевірте теги GTM

Найшвидший спосіб перевірити, чи працює код GTM на сторінках вашого магазину, це перейти на будь-яку з них, натиснути Ctrl+U і переглянути вихідний код.

Однак ви також можете перевірити, чи були додані ваші зміни з облікового запису Tag Manager, натиснувши Preview у робочій області.

Preview Google Tag Manager

Потім введіть URL-адресу вашого веб-сайту Magento у спливаючому вікні.

Connect tag assistant to your website

URL-адресу буде відкрито в новій вкладці. Якщо ви виконали всі кроки правильно, ви повинні побачити наступне повідомлення:

Connect Tag Assistant with your store

Натисніть Continue, щоб побачити сторінку з усіма відстежуваними тегами в Tag Assistant.

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

Tag assistant panel

7. Опублікуйте теги GTM

Важливо: кожного разу, коли ви імпортуєте та переглядаєте зміни в GTM, їх потрібно публікувати.

Перейдіть на вкладку панелі workspace та натисніть кнопку Submit.

Submit changes to Google Tag Manager

Ви перейдете на панель налаштування змін, де ви зможете задати Version Name та Version Description. Ці опцій призначені виключно для вашої зручності. Отже, ви можете залишити їх порожніми та натиснути Publish.

Submit changes to GTM

Потім ви побачите Version Summary зі змінами, датою, описом і користувачем, який їх подав.

New tags version in GTM

Нарешті, ви можете перейти в GA4 > Reports > Realtime та відстежувати активність на своєму веб-сайті.

Google analytics report

Все готово. Ви швидко та легко додали Google Tag Manager в Magento 2.

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

Але це ще не все.

Magento 2 Google Tag Manager від Magefan дозволяє налаштувати Google Ads - Conversion Tracking та Dynamic Remarketing. Тож ви можете використовувати деталізовані звіти, які отримуєте, щоб збільшити кількість конверсій за допомогою персоналізованих оголошень. Ці функції доступні в Magento 2 Google Tag Manager Plus.