Как заставить gtag автоматически отправлять события?

Я пытаюсь добавить Google Analytics на наш сайт с помощью gtag API. Большинство событий, которые меня интересуют, происходят в нашем PHP-коде, поэтому я собираю их в сеансе и внедряю в следующую отображаемую страницу. Это позволяет мне обрабатывать, например. логин с последующим перенаправлением на домашнюю страницу.

Однако, когда я пытаюсь загрузить страницу, ни одно из внедренных событий не запускается. Я знаю, что система работает, так как я могу привязать вызов gtag к событию кнопки onClick, и он работает, когда я нажимаю на нее, а автоматические — нет.

Вот пример файла: test.php:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Test Analytics</title>
</head>
<body>

<!-- Google tag (gtag.js) -->
<script async src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script type = "text/javascript">
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');

    // First attempt: Added to the datalayer with the rest of the config.
    gtag('event', 'test-event-1');

    // Second attempt: Added once everything has finished loading.
    window.addEventListener('load', function () {
        gtag('event', 'test-event-2');
    })
</script>

<div class = "container">
    <h1>This is a test</h1>
    <p>Click to trigger another event.</p>
    <!-- Successful attempt: Event is triggered when run from a button event handler. -->
    <button type = "button"
            onclick = "gtag('event', 'test-event-3')">
        Send Event
    </button>
</div>
</body>
</html>

Когда я открываю эту страницу с работающей вкладкой Firefox Network и нажимаю кнопку, я вижу следующие отправленные URL-адреса:

GET "http://testapp.localhost:9009/analytics-test.html",
GET "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
GET "http://testapp.localhost:9009/favicon.ico",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeav0&_p=22328352&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&_s=2&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&en=user_engagement&_et=4840",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeb20&_p=1344830813&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&_s=1",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeb20&_p=1344830813&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&_s=2&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&en=test-event-3&_ee=1&_et=14263",

«en» — это название события, поэтому вы можете видеть, что в Google отправляется только «test-event-3». Не могли бы вы сообщить мне, как изменить код, чтобы "test-event-1" и "test-event-2" также отправлялись в Google?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
174
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, много проблем, но наиболее вероятная проблема заключается в том, что ваша конфигурация происходит до загрузки библиотеки. Переместите конфигурацию gtag в окно загрузки. Gtag может оказаться недостаточно умным, чтобы задним числом проверить уровень данных.

Другая проблема заключается в том, что вы, кажется, смотрите на вкладку сети. Есть более простой способ отладки аналитики. Я предлагаю попробовать расширение Adswerve debugger. Он показывает ваши события в гораздо более удобной для просмотра презентации прямо в консоли:

Хороший. Другая проблема заключается в том, что вы редактируете файл php. Этот вид реализации не одобряется промышленностью. Есть много проблем, связанных с реализацией отслеживания в бэкэнд-файлах. Реализовать его в файлах шаблонов было бы немного лучше, но все же довольно плохой дизайн.

Правильная реализация будет использовать GTM. GTM будет лучше обрабатывать ретроактивные push-уровни данных, но вам, скорее всего, они не понадобятся с GTM. GTM — это, по сути, скрипт, который может интеллектуально загружать другие скрипты, когда это необходимо, и переводить бизнес-логику, установленную через свой пользовательский интерфейс, в код. Таким образом, с GTM вы просто загружаете его на каждую страницу, а остальная часть отслеживания выполняется в его интерфейсе.

Хотя выполнение вызовов gtag вручную — это способ реализовать отслеживание, это похоже на создание сайта без веб-сервера, просто быстро развертывание собственных внутренних сетевых прослушивателей, которые будут извергать html в ответ. Очень странный и нишевый выбор, не имеющий смысла в подавляющем большинстве случаев. Не ожидайте, что этот вид отслеживания будет жить долго, будет оценен по достоинству, будет масштабируемым, управляемым или даже очень полезным. Тоже не большое наследие.

Спасибо за рекомендацию отладчика Adswerve. Это показало мне, что события проходят, они просто не отображаются на дисплее Network Manager.

Pat Wallace 23.11.2022 11:34

Что касается других ваших комментариев, спасибо за совет. Сайт на самом деле является сайтом Symfony PHP; Я только что отредактировал файл PHP вручную, чтобы показать проблему. Я посмотрю на GTM. Я буду использовать обычное отслеживание просмотров страниц, где это возможно, но есть места, где мне нужны настраиваемые события, например. если пользователь перенаправляется обратно на страницу учетной записи после попытки входа в систему, и мне нужно знать, был ли вход успешным или нет.

Pat Wallace 23.11.2022 11:50

Другие вопросы по теме