Yandex.Metrika и Antora

Как правильно встраивать Yandex Metrika в Antora

Рассмотрим, как настроить интеграцию Antora и Yandex.Metrika. Чтобы было интереснее, добавим дополнительное условие: код метрики должен быть добавлен на страницу только при сборке публичной документации. Собирать метрики с тестовых стендов не имеет смысла.

  1. Перейдите в корневой каталог проекта, содержащего плейбуки.

    Будем считать, что у вас есть как минимум 2 плейбука:

    • antora-playbook-public.yaml — публичная документация;

    • antora-playbook-private.yaml — внутренняя документация.

  2. В плейбуке antora-playbook-public.yaml в блоке site создайте блок keys, а в нём создайте ключ yandex-metrika со значением ID вашего счётчика:

    site:
      title: Публичная документация
      url: /
      start_page: docs:ROOT:index.adoc
      keys:
        yandex-metrika: 000000000
    
  3. Создайте каталог supplemental-ui/, а внутри него подкаталог partials/:

    mkdir -p supplemental-ui/partials/
    
  4. В каталоге supplemental-ui/partials/ создайте файл footer-scripts.hbs с таким содержимым:

    {% raw %}<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
    <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
    {{#if env.SITE_SEARCH_PROVIDER}}
    {{> search-scripts}}
    {{/if}}
    
    {{#if site.keys.yandexMetrika}}
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (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({{{site.keys.yandexMetrika}}}, 'init', {webvisor:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
                          </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/100874372" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    <!-- /Yandex.Metrika counter -->
    {{/if}}
    

    Первая часть этого шаблона взята из дефолтного UI Antora. Вторая часть — интереснее. Это код, который генерирует Yandex.Metrika, обёрнутый в проверку существования ключа yandexMetrika:

    {{#if site.keys.yandexMetrika}}
    ...
    {{/if}}{% endraw %}
    

    Обратите внимание на то, что Antora приводит названия ключей из плейбука к camelCase. Это значит, что она будет искать не site.keys.yandex-metrika, а site.keys.yandexMetrika. В плейбуке вы можете использовать в качестве разделителя дефис и подчёркивание.

  5. Добавьте в плейбуки блок настроек, заставляющий Antora использовать содержимое из созданного каталога:

    ui:
      bundle:
        url: /antora/ui-bundle.zip
        snapshot: true
      supplemental_files: /antora/supplemental-ui
    

    Я собираю документацию внутри контейнера, поэтому путь к supplemental-ui абсолютный.

  6. Соберите документацию и убедитесь, что при сборке с плейбуком antora-playbook-public.yaml на сайт добавляется счётчик, а при сборке с плейбуком antora-playbook-private.yaml этого не происходит.

Создано при помощи Hugo
Тема Stack, дизайн Jimmy