Добавление счетчика просмотров на ваш веб-сайт JAMstack с помощью JavaScript и Google Analytics

Введение

По мере того, как JAMStack становится все более и более популярным, многие люди (особенно разработчики) переводят свои сайты (и блоги) на JAMStack и используют какой-нибудь Генератор статических сайтов (Jekyll, Hugo, Nuxt, Next, Gatsby и т. д.) .

Мой блог основан на Hugo и размещен на Netlify. Мой предыдущий пост получил больше просмотров, чем я ожидал, и я провел следующие два дня, проверяя свое Аналитическое приложение, чтобы отслеживать просмотры. Затем мне пришло в голову, что я должен попробовать добавить счетчик просмотров в свой блог. Я выкладываю все свои статьи одновременно на dev.to и Medium, и оба они сообщают мне, сколько просмотров набрала моя статья.

Мне потребовалось около 4 часов, чтобы добавить счетчик просмотров, но вам это не понадобится, потому что я экспериментировал со многими вещами.

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

Немного поискав, я пришел к выводу, что лучше всего использовать данные Google Analytics вместо добавления нового механизма.

Я потратил около двух часов на возню с Google Core Reporting API v3, потому что хотел избежать требования API KEY Google Analytics Reporting API v4. Когда я уже почти доделывал изменения, я где-то прочитал, что v3 API перестанет работать в этом году.

Потратив 2 часа на v3, я понял, что у меня нет другого выбора, кроме как использовать v4. При поиске материала, связанного с v4, я наткнулся на Надстройку для электронных таблиц Google Analytics, которая позволяет экспортировать данные Google Analytics в электронную таблицу Google. После долгих экспериментов, после многочисленных руководств и многочисленных посещений Переполнения стека я смог экспортировать свои данные аналитики в Google Таблицы.

Затем мне нужно было выяснить, как получить эти данные на свой сайт. Я решил использовать встроенные функции и переменные Hugo для достижения этой цели (очень плохое решение в ретроспективе). Я потратил еще час на изучение документации Хьюго, чтобы показать данные о просмотрах страниц на моем веб-сайте. После того, как все было сделано, и я собирался зафиксировать изменения, я решил проверить размер данных, которые я загружал из Google Таблиц. К моему удивлению и шоку, я не смог найти запись для CSV-файла на вкладке Сеть моего браузера. Затем мне пришло в голову, что данные извлекаются во время сборки, чего я хотел избежать. Собрав все изменения, я решил использовать JavaScript, чтобы все заработало. Поскольку на моем сайте нет jQuery, и я не хотел добавлять его для такой маленькой задачи, я написал весь код на ванильном JavaScript (который мог бы написать лучше) и наконец-то он заработал.

В следующем руководстве будет рассмотрено только получение данных из Аналитики в Google Таблицы и получение этих данных в ванильном JavaScript. Я не буду показывать, как добавить это на ваш сайт, так как структура каждого сайта отличается.

Руководство

Часть а) Настройка надстройки Google Sheets + Analytics

Следуйте этому руководству, чтобы установить надстройку в свои Google Таблицы.
Выберите «Дополнения» › «Google Analytics» › «Создать новый отчет» в строке меню.
Назовите его как-нибудь и выберите представление Analytics.
В параметрах конфигурации выберите «Просмотры страниц» (ga:pageviews) в качестве показателя.
Размеры будут зависеть от структуры вашего сайта. Page Path Level 1 вернет данные только для страниц и папок в корневом каталоге вашего веб-сайта. Page Path Level 2 вернет данные для страниц и папок в некоторой папке в вашем корне. Используйте следующую таблицу, чтобы определить свой размер.

Сообщения моего блога находятся в каталоге posts/, поэтому я решил использовать оба измерения — Page Path Level 1 и Page Path Level 2. Используя как 1, так и 2, я получаю как сообщения, так и URL-адрес моего сообщения в блоге.

Если вы используете параметр «Страница» вместо «Путь к странице n», ваши данные также будут включать строки запроса, и данные будут разделены для каждого уникального URL-адреса.

6. В разделе «Сегменты» я выбрал «Все пользователи». но вы также можете использовать новых пользователей, чтобы получать только уникальные просмотры.

7. Создайте отчет, и вы увидите, что ваш лист конфигурации будет сгенерирован.

8. Измените дату начала на дату до вашего первого сообщения в блоге (в формате ГГГГ/ММ/ДД) и измените дату окончания на «сегодня».

9. Вам следует снять ограничение в 1000, если вы хотите получить данные для более чем 1000 сообщений.

10. Создайте еще один пустой лист, который будет использоваться в качестве вывода. Поделитесь этим листом с включенным разрешением на редактирование. Скопируйте ссылку «Поделиться».

11. Вставьте скопированную ссылку на общий доступ в лист конфигурации в строке URL-адреса электронной таблицы.

12. Выберите «Дополнения» › «Google Analytics» › «Запуск отчетов» в строке меню.

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

14. Выберите «Дополнения» › «Google Analytics» › «Расписание отчетов» в строке меню.

15. Выберите «Включить автоматический запуск отчетов», запускайте его «каждый час» и сохраните.

16. Вернитесь к выходному листу и выберите «Файл» › «Опубликовать в Интернете».

17. В разделе «Опубликованное содержимое и настройки» выберите имя листа и установите флажок «Автоматически повторно публиковать при внесении изменений». Затем нажмите «Начать публикацию».

18. Выберите «Значения, разделенные запятыми (.csv) в качестве выходного формата, и скопируйте указанную ссылку».

Часть б) Получение данных в вашем блоге

На странице, где вы хотите отобразить данные просмотра, добавьте файл JavaScript (или отредактируйте существующий файл JavaScript для этой страницы).
Используйте Fetch API, чтобы получить данные CSV и проанализировать их с помощью функции CSVToArray из этого Ответа StackOverflow

url  = "The link you copied in Step 18 of Part a"
   fetch(url).then((response)=>{
       return response.text()
   }).then((text)=>{
       data = CSVToArray(text)
       viewMap = {}
       for(let i = 15; i < data.length; i++){
           viewMap[window.location.href + data[i][0].slice(1,-1) + data[i][1]] = parseInt(data[i][2])
       }
     }
   })

Возможно, вам потребуется изменить код в соответствии с вашими потребностями

3. У вас будет словарь с вашими URL-адресами сообщений в качестве ключа и их просмотрами в качестве значений.

4. Используйте их в соответствии со структурой вашего сайта. (Вы можете посмотреть на мой код блога, если вам нужна дополнительная помощь)

Ресурсы

Прочтите это дальше

Блог Хайдера Али Пенджаби
Середина
Dev.to