Как правильно подключить Google Analytics к Angular?

Question

[Максим]

Как правильно подключить Google Analytics к Angular?

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=NA-***"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'NA-***');
</script>

Или вставить в src/index.html после открывающегося head и все?

Answer 1

[Максим]

Старый вариант :)

Как всегда: "Все уже придумали за нас", но есть одно НО...
После регистрации сайта на Google Analytics, выдают script вида:

gtag.js

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=NA-***"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'NA-***');
</script>

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

Я, используя Angular, пока не нашел как бороться с роутами, посте того как зальешь проект на хост. Описывал суть проблемы тут
Т.е. что бы нормально переходило по страницам, они отображаются в адресной строке через #.

Пример

www.mysite.com/#/blog

Когда я в app.modules.ts добавил строку

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

То хосте роуты начали работать без проблем, но в личном кабинете Google Analytics переход по странице перестает отслеживаться, показывает что человек постоянно висит на 1-й странице.

Как быть в этой ситуации?

1. Зарегистрировался на Google Analytics, получил script:

gtag.js

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=NA-***"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'NA-***');
</script>

2. Script вставил после открытия тега head.
3. В готовый проект добавил .htaccess

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Все заработало, в реальном времени отслеживает на какой именно странице пользователь.

Answer 2

[Даша Циклаури]

Посмотри в сторону Angulartics. У них исчерпывающая дока, но если возникнут вопросы в подключении, то отвечу.

Comments

[Максим]

Пытался через него, но куда потом использовать параметр?

Уточнение

скрипт вставлять в таком виде

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=NA-***"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'NA-***');
</script>

или в таком

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'NA-***', 'auto');
</script>

[Даша Циклаури]

Максим, нужно в первую очередь отключить virtualPageViews, инжектишь экземпляк Angulartics2 (import { Angulartics2 } from 'angulartics2') - в компоненте ang2.virtualPageviews(false). Далее подписываешь на изменение урла (_router.events.subscribe(e=>...)) и после окончания навигации (if (e instanceof NavigationEnd){...}) трэкаешь событиe.
ПС. я через ГТМ делаю это так

this._gtm.eventTrack('event', {
              event: 'ngPageView',
              value: {
                url: this.location.path(false)
              }
            })

UPD
У меня специально событие названо ngPageView (мы на его основе завязали всю аналитику), тебе же надо посылать стандартное, по-моему PageView.
Если пользователь авторизован, то в самом начале еще дергай setUsername(userId) аналитика сама будет это учитывать при агрегации. Можно конечно на конфигах все разрулить как в доке сказано (там всякие шаблоны прописать, регэкспы), но на мой взгляд в коде удобнее и более гибко.
вот как в доке трэкают

[Максим]

Даша Циклаури, у меня скрипт Google

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=NA-***"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'NA-***');
</script>

все отслеживает, без "танцев с бубном", но появилась другая проблема :)

[Адель Халитов]

Даша Циклаури, Дарья если вы работали с этим компонентом, прошу помочь мне.
Как отследить событие с помощью angulartics2?