search

angulartics / angulartics-google-analytics

Google Analytics plugin for Angulartics
MIT License
133 stars 86 forks source link

Google Analytics loaded asynchronously #73

Closed rainerhahnekamp closed 8 years ago

rainerhahnekamp commented 8 years ago

Hello,

since I am loading ga.js asynchronously after angular's bootstraping is finished, I am receiving the exception:

Error: neither Classic nor Universal Analytics detected at bootstrap. Angulartics-GA will ignore all commands!

Is there some way to trigger the detection of the handler?

DanWilkerson commented 8 years ago

https://developers.google.com/analytics/devguides/collection/analyticsjs/#alternative_async_tracking_snippet

Can you put the first part (copied below) of the alternative snippet above Angulartics? 

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

If you're using Classic Analytics, you'll need to use this snippet instead:

<script>
  var _gaq = window._gaq = window._gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
</script>

These snippets establish the globals that Angulartics-GA uses to determine which syntax to use when issuing commands.

rainerhahnekamp commented 8 years ago

Hi Dan,

thanks, that makes sense but I understood that I still have to remove the ga('send', 'pageview') line, right?

Greetings, Rainer

timelf123 commented 8 years ago

Correct, remove the ga('send', 'pageview'); and let angulartics handle the pageviews

rainerhahnekamp commented 8 years ago

Understood :) Thanks a lot

kukac7 commented 7 years ago

it did not work with the async code, only the other. if it was a ga('send', 'pageview'), you can run the pageview, but the page does not change when you do anything.

kukac7 commented 7 years ago

🆙 😕

timelf123 commented 7 years ago

@kukac7 I don't understand your issue

kukac7 commented 7 years ago

@timelf123 I have a tracking does not work with the alternative snippet. https://developers.google.com/analytics/devguides/collection/analyticsjs/#alternative_async_tracking_snippet


<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
DanWilkerson commented 7 years ago

@kukac7 this is an exercise in redundancy, as the standard snippet forces Google Analytics to load asynchronously anyways - there's no reason to manually force an async load. You can use the standard snippet and you'll see the performance gains are moot, if any.

That said, please ensure the alternative snippet (everything but the <script async src="..."></script> tag are placed above the Angular files. Your code should look like this:

<head>
    <!-- any other dependencies loaded in the head, angular etc -->
   <script>
     window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
     ga('create', 'UA-XXXXX-Y', 'auto');
  </script>
</head>
<body>
  <!-- rest of BODY -->
   <script async src="...">
</body>
DanWilkerson commented 7 years ago

Again, I want to stress that this is A) redundant and B) counterproductive to the purpose of adding Google Analytics to a website; users who browse away from the page before the snippet can load will not be tracked, which causes inconsistencies in reporting and undermines confidence in the data collected. The best practice recommendation is to always put the analytics snippet as high up in the of your document as possible.