Как настроить надежный и обслуживаемый Google Analytics в Webpack

1656560292 kak nastroit nadezhnyj i obsluzhivaemyj google analytics v webpack

Одной из самых сложных частей новой настройки приложения является попытка выяснить, где хранить сценарии инициализации Google Analytics. Существуют некоторые параметры, такие как React Helmet, чтобы управлять главной частью документа. Вы можете бросить его в свой монолит index.html файл.

Дело в том, что эти опции редко работают так, как вы желаете. Они заканчиваются как уродливые блоки строк HTML в вашем JavaScript. В конце концов вам придется управлять этим монолитом. index.html файл, о котором я упоминал раньше, в течение всего жизненного цикла вашего проекта.

Почему это важно

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

Многие разработчики предполагают, что поскольку это фрагмент JS, лучшая практика – бросить его внизу страницы. Проблема заключается в том, что бросание его в конце создает больший риск того, что вы пропустите отслеживание обращения до того, как пользователь закроет страницу, поскольку Analytics не инициализируется, пока не загрузится другая часть страницы. Поэтому сам Google рекомендует устанавливать фрагмент как можно выше в уме.

Как бы я ни сказал, что это важно, вам может быть все равно, если вы будете более спокойны по этому поводу и хотите получить общее представление о том, как все работает на сайте вашего портфолио. Однако если вы расширите охват с помощью других инструментов, таких как A/B-тестирование с помощью Google Optimize, еще важнее, чтобы GA распознала страницу и запустил эксперимент во избежание дополнительных задержек или, что еще хуже, мерцания страницы. ?

w5Vp2B34jmhaGtlwnRSkksQrrN4YlmDN2QCC
Нежелательное содержимое мерцает во время выполнения теста

Как мы это исправим

Partials for HTML Webpack Plugin — это расширение плагина HTML Webpack, которое упрощает ваше частичное управление. Его цель состоит в том, чтобы специально пытаться избежать практики поддержки index.html файла в проектах Webpack и отложите доступные части, что упрощает вашу настройку.

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

TL;DR — Если вы хотите сразу перейти к решению, вы можете получить код здесь.

Начинаем

Мы хотим начать с базовой настройки Webpack с уже настроенным плагином HTML Webpack. Это руководство не проведет вас через эту настройку, но вот несколько отправных моментов, если вы не знакомы:

Наконец-то, если у вас уже есть index.html настроить, сейчас я не буду вас осуждать, но, надеюсь, это вдохновит вас так же подойти к другим фрагментам и устранить потребность в управляемом index.html файл вообще.

Установка Partials для HTML Webpack Plugin

После того, как вы уже установили базовые настройки и установили плагин HTML Webpack, наш плагин Partials можно легко добавить:

yarn add html-webpack-partials-plugin -D

Примечание. Убедитесь, что зависимость пакета правильно настроена на основе конфигурации вашего проекта.

Настройте свою частичную

Далее мы хотим создать нашу частичную. Мое преимущество в общем управлении ими заключается в создании нового каталога под названием partials в исходном корне. К примеру, если ваша точка входа находится по адресу src/main.jsваш каталог частиц будет прямо рядом с ним по адресу src/partials.

4DvDYHwNSvfIEj5lOUC5Sqg8llPLLm5HRf-H

Когда вы определите желаемое местоположение, давайте создадим файл analytics.html файл в нашем новом каталоге partials. Пока давайте введем тестовый код, чтобы мы знали, что он работает. в analytics.html:

<style>
body { background-color: #5F4B8B; }
</style>

Настройте свою частичную

Откройте свой webpack.config.js и давайте настроим частичный, чтобы включить его в наш сборник.

Во-первых, требуется плагин в верхней части конфигурации. в webpack.config.js:

const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

Далее, и это очень важно, включите новый экземпляр плагина ПОСЛЕ ваш экземпляр HtmlWebpackPlugin(). В разделе плагинов webpack.config.js:

... плагины: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/src/partials/analytics.html'),
    location: 'head',
    priority: 'high'
  })
...

Now let’s first break down that config before moving on:

  • path: this is what it sounds like, the path to the partial file in our project. Make sure to update this to the right location so the plugin can find it.
  • location: the HTML tag the plugin looks for.
  • priority: this determines whether at compile time, our plugin adds our partial at the beginning of the specified location tag or the end (opening vs. closing).

Like we covered earlier, we want to add this as high in the <head> as possible. For most HTML tags used in location, Partials add it right after the opening tag if the priority is high. But with the <head> tag, Partials looks for your charset meta tag and injects it immediately after, as it’s important to render that in the document first.

Test it out

Compile Webpack, open your project in your browser, and you should now see a nice, ultraviolet background. ?

P0Nop8w9LQIsmhFtLCkM1gAzHJBxyMGPKsSu

If you take a look at the source, you should see the snippet get added right after the charset tag!

Now to Analytics

Let’s update our analytics.html file to look something like this:

<script async src="
<script>
window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);} gtag('js', new Date());  gtag('config', 'UA-XXXXXXXX-X');  

Просто не забудьте обновить идентификаторы (UA-XXXXXXXX-X) в соответствии со значением свойства Google Analytics. Фрагмент Analytics также может отличаться в зависимости от настроек.

Теперь вы сможете повторно скомпилировать Webpack и увидеть, как страница начинает ping Google Analytics! ?

Примечание: возможно, вам придется загрузить файл проекта с сервера, прежде чем GA будет распознан, а не непосредственно из вашей локальной файловой системы

Давайте сделаем шаг дальше

Это замечательно, и все, но когда вы имеете дело с Google Analytics, хорошо иметь несколько различных свойств, таких как один для разработки, а другой для производства. Это помогает избежать загрязнения производственных свойств данными вашей команды разработчиков (или вас), перебирающих программу.

Настройка частичных переменных

Вернемся к нашему webpack.config.js файл и настройте переменную для передачи идентификатора нашего свойства:

... плагины: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/src/partials/analytics.html'),
    location: 'head',
    priority: 'high',
    options: {
      ga_property_id: 'UA-XXXXXXXX-X'
    }
  })
...

Next, update your analytics.html file to recognize this value. Similar to HTML Webpack Plugin, Partials uses Lodash templating to make this work. In analytics.html:

<script async src=" ga_property_id %>"></script>
<script> window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);} gtag('js', new Date());  gtag('config', '<%= ga_property_id %>');  

Теперь компилируйте еще раз и принесите прибыль!

2Fk3qpRoO0nD5BKjjE1OItqOB6XTk66STjoT
Google Tag Assistant показывает успешный запрос на просмотр страницы

Чтобы убедиться, что ваш тег правильно настроен, я рекомендую использовать Google Tag Assistant, доступный в Chrome.

Настройка этого для разных идентификаторов собственности

Отсюда у вас есть несколько вариантов, как вы управляете разными идентификаторами собственности. Ты можешь:

Настройка этого способа позволит динамически запускать свойства между локальной разработкой и производственной сборкой. Просто помните, что не храните env файл в git, если вы собираетесь добавлять конфиденциальные данные. ?

Итак, что мы имеем из этого?

Идеальный сценарий состоит в том, что вы возьмете это и работаете с ним до конца своего HTML-кода. index.html. Это помогает разделить код на более управляемые части и позволит Webpack генерировать файл для вас, а не пытаться переопределять и управлять им самостоятельно.

Специально для Google Analytics у нас есть несколько преимуществ:

  • Убедитесь, что фрагмент загружается в надежном месте
  • Предоставление более разумного способа поддержки самого фрагмента
  • Управление идентификатором собственности через конфигурацию Webpack
  • И бонус: загрузка его как переменной env из-за конфигурации Webpack

Чтобы увидеть полное решение с некоторым примером кода, просмотрите пример в репозитории GitHub.

Следите за мной, чтобы получить больше Javascript, UX и других интересных вещей!

Первоначально опубликовано на

Добавить комментарий

Ваш адрес email не будет опубликован.