С тех пор, как Google Analytics представила GA 4, в базовой настройке проекта Google произошло много изменений. Они ввели концепцию свойств и потоков, чтобы различать разные части приложения, которые намного превосходят универсальные.
Сегодня я объясню код для интеграции Google Analytics 4 со Sveltekit 1.0+, который имеет маршрутизацию на основе папок. В блоге не рассматривается настройка проекта и получение скрипта интеграции из консоли аналитики. Есть много ресурсов, которые помогут вам сделать это.
Подход
Позвольте мне сначала объяснить основной подход. В родительский файл +layout.svelte мы добавим наш скрипт для аналитики Google, который мы получаем с панели инструментов. Для этого мы просто создадим компонент и включим его в наш файл макета.
Затем мы создадим хранилище для хранения всех событий и просто подпишемся на это хранилище в компоненте и отправим событие на платформу Google Analytics.
На какой бы странице (+page.svelte) мы ни хотели добавить события, мы просто добавим данные о событии в хранилище, и благодаря подписке хранилище выполнит это событие. Подумайте о чем-то вроде очереди.
Следует отметить, что мы не можем отправлять данные из +layout.ts или +page.ts напрямую в аналитику, поскольку скрипт GA не будет инициализирован в этих ts-файлах. Хотя мы можем отправлять данные, если пользователь меняет маршрут из приложения, но при обновлении мы не можем отправлять данные.
Код
В качестве подхода мы сначала создадим файл Analytics.svelte, и код этого файла:
В приведенном выше файле мы добавляем тег script в тег svelte:head, чтобы он прикреплялся к тегу ‹head› в HTML при рендеринге. Я объясню код подписки analyticsStore после того, как объясню, как мы будем добавлять данные в магазин.
В приведенном выше коде мы просто создаем хранилище и назначаем пустой массив в качестве начального значения.
В файле +layout.svelte мы просто импортируем и вызываем компонент Analytics
В любой файл +page.svelte добавьте следующий код
Это добавит новый объект события в магазин, и событие будет отправлено на платформу аналитики Google.
Теперь, когда мы увидели добавление данных в analyticsStore (в основном обновление магазина). Вернемся и разберемся, что мы делали, подписываясь на магазин
Идем по строчке,
2. Я просто подписываюсь на магазин. В Sveltekit, когда вы подписываетесь на магазин, вы получаете уведомление, когда что-то в нем меняется, мы воспользуемся этим.
3. Мы просто учитываем, что значение мы получаем как часть очереди (изначально массив для нас). В переменную с именем next мы добавляем первое значение массива, который присутствует в обновленном хранилище (Может быть несколько событий одновременно, которые отправляются в хранилище. Важно отправлять все события в одном порядке)
4. retries — это переменная, которая отслеживает повторные попытки для текущей транзакции, т. е. текущее событие, которое не удалось
5. Проверяем правильность данных или нет, т.е. у них есть идентификатор, событие, данные для отправки и тип события для отправки. Если чего-то не хватает, мы просто заменим значение следующей переменной и продолжим цикл while.
18. Проверяем, совпадает ли предыдущее значение id с текущим или нет. Если нет, то мы снова увеличим количество попыток до 3.
20. Затем мы присваиваем предыдущую переменную id текущему id
25. Проверяем доступен gtag или нет т.е. загрузился скрипт или нет
29–31. Мы проверяем, больше ли повторных попыток, чем 0, затем уменьшаем повторные попытки и снова запускаем цикл while для того же элемента/события.
36. Мы обновляем следующую переменную, чтобы она содержала следующее значение в массиве.
Примечание.Это не лучший подход, и его можно улучшить, добавив повторные попытки на основе времени.
Если у вас есть какие-либо вопросы или вы хотите что-то спросить, оставьте комментарий ниже, и если вам нравится блог, не забудьте нажать значок хлопка.
