Рецепт аналитики для Twine 2

Задача: смотреть, какие пассажи посетил игрок (из этого, например, можно вывести, сколько процентов игроков дошло до финала)

Для начала - выбираем систему аналитики. Если не вдаваться в подробности и различия, есть три популярных варианта:

• Гугл Аналитика
• Яндекс.Метрика
• Matomo, раньше называлась Piwik

Выбираете систему, она даёт вам кусок кода Javascript и ID. Здесь будут готовые куски кода (не забудьте заменить переменные!)

Затем открываете игру в редакторе Twine, нажимаете на название игры (слева внизу), выбираете «Редактировать Javascript». Туда вставлять код JS.

Google Analytics

Понадобится также настроить googletagmanager. Рецепт подходит для SugarCube, для других форматов попробуйте убрать строки с LoadScreen.

var lockID = LoadScreen.lock();
importScripts('https://www.googletagmanager.com/gtag/js?id=XXX').then(function () {
  window.dataLayer = window.dataLayer || [];
  window.gtag = function () {
    dataLayer.push(arguments);
  };
  gtag('js', new Date());
  gtag('config', 'ВАШ_ID');
  
  $(document).on('click', 'a[data-passage]', function () {
    gtag('event', 'Navigation', {
      event_label : $(this).attr('data-passage'),
      event_category : 'GuestClick'
    });
  });
  if (State.size > 0) { Engine.show(); }
  LoadScreen.unlock(lockID);
}).catch(function (error) {
  console.warn('Не смог загрузить библиотеку "gtag".');
  LoadScreen.unlock(lockID);
}); 

Matomo

 var _paq = window._paq = window._paq || [];
 _paq.push(['trackPageView']);
 _paq.push(['enableLinkTracking']);
 (function() {
   var u="АДРЕС_СЕРВЕРА_MATOMO";
   _paq.push(['setTrackerUrl', u+'matomo.php']);
   _paq.push(['setSiteId', 'ID_САЙТА']);
   var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
   g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
 })();
 $(document).on('click', 'a[data-passage]', function (ev) {
   var passage = $(this).attr('data-passage');
   if ( passage && _paq ) { 
      _paq.push(['trackPageView', passage])
   }
 });