Как поставить в очередь события gtag google analytics - PullRequest
Новая
       99

Как поставить в очередь события gtag google analytics

0 голосов
/ 21 июня 2020

Я работаю над приложением Rails, в котором включены турболинки . Из-за турболинков мне пришлось отложить загрузку вызова gtag('config'), который отслеживал бы просмотр страницы, и настроить GA с идентификатором отслеживания: 

<head>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    document.addEventListener('turbolinks:load', function(event) {
      if(typeof(gtag) == 'function'){
        gtag('config', '<%= Rails.application.config.ga_tracking_id %>', {
          'page_title' : event.target.title,
          'page_path': event.data.url.replace(window.location.protocol + "//" + window.location.hostname, "")
        });
      }
    })
  </script>
</head>

Это похоже на рекомендуемая практика использования gtag() с турболинками . Если я этого не сделаю, событие GA pageview не будет зарегистрировано после первой страницы из-за того, как turbolinks взламывает поведение refre sh страницы.

Для того, чтобы записать в журнал определенные c События Google Analytics от моих контроллеров Rails, я помещаю некоторый контент в объект Rails fla sh, который затем принимает функция JavaScript:

Мой контроллер: 

flash[:log_event] = {
  'event_category' => 'general',
  'event_name' => 'login',
  'method' => 'facebook'
}

Мой макет имеет простой Rails -> JavaScript мост: 

<script>
  handleLogEvent(<%= flash[:log_event].to_json.html_safe %>)
</script>

Метод handleLogEvent просто вызывает gtag('event'): 

  function handleLogEvent(fromRails) {
    if (fromRails) {                                          
      const eventData = fromRails;
      const eventName = fromRails.event_name;
      delete eventData.event_name;
      gtag('event', eventName, eventData);
    }
  }

ПРОБЛЕМА

gtag('event') срабатывает раньше gtag('config'). В результате он вообще не работает. Если я добавлю тайм-аут в пару секунд, он будет работать нормально. (например, setTimeout(function () { gtag('event', eventName, eventData) }, 2000);).

Поскольку функция gtag существует, мне интересно, есть ли для меня правильный способ поставить в очередь события, которые происходят до вызова функции gtag('config')? На данный момент это будет одно событие.

STUFF I'VE TRIED

Мне удалось добавить второго слушателя для turbolinks:load: 

  document.addEventListener('turbolinks:load', function(event) {
    if(typeof(gtag) == 'function'){
      gtag('event', eventName, eventData);
    }
  });

Хотя, кажется, большая тупица. Я предполагаю, что первый слушатель (который вызывает gtag('config') может выйти из строя, что приведет к непредсказуемым результатам.

...