Блог на Gatsby + Obsidian from scratch ч.3

Назад14.01.2023Дополняется...

Это продолжение серии статей:

Добавляем аналитику

В документации описано, как добавить google analitics и google tag manager, я же буду использовать в качестве инструмента для анатилити Яндекс Метрику.

Плагин gatsby-plugin-yandex-metrika у меня лично не завелся, я не увидел никаких сетевых запросов в api метрики после его установки, как в прочем и ошибок, возможно я что-то делал не так (

Помимо плагинов мы можем кастомизировать html.js компонент, который Gatsby использует чтобы отрендерить всю html разметку страницы

Копируем файл

cp .cache/default-html.js src/html.js

Устанавливаем dotenv пакет, если еще не установлен, мы будем хранить id счетчика метрики в переменных окружения, чтобы не хардкодить его

npm i -D dotenv

Патчим webpack конфиг в файле gatsby-node.js, чтобы в коде все что начинается с process.env.SMTH заменялось на значение SMTH, которое указано в файле .env

const dotenv = require('dotenv');
const envVars = dotenv.config().parsed;

const envKeys = Object.keys(envVars).reduce((acc, env) => {
  acc[`process.env.${env}`] = JSON.stringify(envVars[env]);
  return acc;
}, {}); // { SOME_ENV_VAR: 'SOME_VALUE', ... }

exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
  actions.setWebpackConfig({
    plugins: [
      // Add the environment variables to webpack.DefinePlugin with define().
      plugins.define(envKeys)
    ]
  });
};

Создаем файлик .env в корне сайта с содержимым

METRIKA_TRACKING_ID=YOUR_ID # id счетчика метрики

В файлике src/html.js добавляем следующий код (я добавил скрипт перед закрытием тега </body>):

// src/html.js
		<script
          dangerouslySetInnerHTML={{
            __html: `
                (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                m[i].l=1*new Date();
                for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
                k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
                (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
              
                ym(${process.env.METRIKA_TRACKING_ID}, "init", {
                      clickmap:true,
                      trackLinks:true,
                      accurateTrackBounce:true
                });
            `,
          }}
        />

Если все сделано верно, то в панели network вы должны увидеть что уходят запросы в метрику с вашим id счетчика (там где на скрине зачеркнуто красным)

Вместо заключения

По мере развития блога я буду дополнять эти статьи, в том числе и для себя, а в следующих статьях мы прикрутим sitemap.xml, robots.txt, поиск по постам и может быть что-нибудь еще 😁