philipwalton / analyticsjs-boilerplate Goto Github PK

Currently linking to:

https://github.com/philipwalton/analyticsjs-boilerplate/blob/master/src/analytics/index.js which 404s.

Should probably resolve to:
https://github.com/philipwalton/analyticsjs-boilerplate/blob/master/src/analytics/base.js

Link is to: https://philipwalton.com/the-google-analytics-setup-i-use-on-all-my-websites/#testing-your-implementation-using-multiple-trackers

Hi, thanks for putting the time in to come up with this repo and to blog about it!

I've noticed this little snippet in the example code, but it doesn't seem to be mentioned in the blog.

VISIBILITY_STATE: 'dimension8',

I'm new to implementing ga so i'm not all there with how scope works etc. buy I'm guessing it's hit scope?

Pointed at:

https://github.com/philipwalton/analyticsjs-boilerplate/blob/master/src/analytics/multiple-tracker.js

Should probably resolve to:

https://github.com/philipwalton/analyticsjs-boilerplate/blob/master/src/analytics/multiple-trackers.js

First of all thank you very much Philip for this excellent boilerplate.
Could you please also add a short documentation how to set up the custom dimensions and metrics in the Google Analytics dashboard?
I've implemented your boilerplate to my site but I do not know how to see the individual results.
Sorry, I am not that experienced in GA.
Thanks 👍

Followed along with your blog tutorial and am using your autotracker.js file

I have setup my tracking ids and i can see with the google analytics debug tool that my data is being sent

analytics_debug.js:10 dimension2       (&cd2)  1562436572.1499894101
analytics_debug.js:10 dimension3       (&cd3)  77849254-9ebe-4d40-b291-daafc5cd2384
analytics_debug.js:10 dimension4       (&cd4)  80acfb86-251a-47a3-9c42-9a3d47ad5244
analytics_debug.js:10 dimension5       (&cd5)  1506631639768
analytics_debug.js:10 dimension6       (&cd6)  event
analytics_debug.js:10 dimension7       (&cd7)  pageVisibilityTracker
analytics_debug.js:10 dimension8       (&cd8)  hidden
analytics_debug.js:10 dimension9       (&cd9)  (not set)

but for some reason its never available in the dimension reports or anywhere based on your tutorial :(

This is a really great way to approach working with GA, thanks for sharing it. It includes so many of the ideas I've hacked support for into previous implementations, with many more I hadn't thought of, in a really flexible and clean package!

I wondered if you had thoughts on moving this code to support gtag, or whether you felt gtag gave you some of the flexibility you're going for in this code without some of the local boilerplate.

Or do you feel that the differences between ga and gtag are transparent enough to simply change the reference?

Thanks for the insight!

Firstly, thank you for this amazing library.

I have a question and hope get some suggestions.

Here is the question:

Code in boilerplate places tracking code in a separate file using code splitting tech via webpack.
We can see the init function in analytics/base.js is executed after module get loaded.

init() {
  // Initialize the command queue in case analytics.js hasn't loaded yet.
  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
}

After async load module, other code(main logic of the website) is also executed. At the moment(init function in analytics/base.js hasn't been executed), if we trigger ga in window, it will be undefined.

Here is maybe a possible solution

Maybe we should mv window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; to index.html ?

But window.onerror works, so consider switching to that. The downside is it can get overridden by other libraries (like mocha in tests for example).

On the other hand maybe error tracking for browsers not even supported by their manufacturer isn't worth it.

Hi Philip,
Could you please explain in your article what the HIT_SOURCE dimension is useful for?
Thank you

Hi Phil,

Thank you for all your work. I've started to learn more about analytics and your resources have been great. I've a question about the last two dimension on this object:

const dimensions = {
  TRACKING_VERSION: 'Tracking Version',
  CLIENT_ID: 'Client ID',
  WINDOW_ID: 'Window ID',
  HIT_ID: 'Hit ID',
  HIT_TIME: 'Hit Time',
  HIT_TYPE: 'Hit Type',
  HIT_SOURCE: 'Hit Source',
  VISIBILITY_STATE: 'Visibility State',
  URL_QUERY_PARAMS: 'URL Query Params',
};

What should the scope be? To fill this form:

Thank you,
-Ricardo.

I appreciate the effort you put into this and would like to try it live on one of the sites I'm maintain. However, I'm new to webpack.

I see the example index.html file is a good baseline to follow but I can't seem to understand where the build files exist after running npm start. In fact, if I want a build of these scripts, it seems like I'd have to either:

1. use the original source files, knowing that no browsers can translate import yet, or
2. have webpack running on the production server

Would it be possible to include a few instructions to place this script into production, such as which values to change and how to produce a build or dist folder with all the files?

Link is to: https://philipwalton.com/the-google-analytics-setup-i-use-on-all-my-websites/#autotrack-plugins which 404s.

Hey Philip - I think this setup is excellent and have implemented various solutions for certain autotrack plugins (page scroll, clean URLs). However, it's not clear if using the boilerplate and GTM are mutually exclusive?

Is implementing with GTM possible/recommended? If so, any tips/gotchas?

Cheers!

I'm currently testing things out and noticed that if I attempt to build for production with Webpack it results in the following errors:

ERROR in 0.js from UglifyJs
SyntaxError: Unexpected token: name (Session) [./~/autotrack/lib/session.js:34,0][0.js:43,6]

ERROR in test.js from UglifyJs
SyntaxError: Unexpected token operator «=», expected punc «,» [./~/autotrack/lib/utilities.js:38,
0][test.js:1214,12]

I also noticed a few warnings as well:

WARNING in ./~/colors/lib/colors.js
138:29-43 Critical dependency: the request of a dependency is an expression

WARNING in ./~/colors/lib/extendStringPrototype.js
101:31-45 Critical dependency: the request of a dependency is an expression

Not sure what the answer is. Not much of a Webpack expert to be honest. :P

I am the exact man who just copy/pastes the default tracking snippet and calls it a day. But I donot know how to use this boilerplate directly...

I read your post, but I do suppose it need time to digest as a newbie.

Correct me if I am wrong:

1. If someone use a build system with code splitting features, he can just copy the src/analytics dir to his project and add code in his main.js, import('./analytics/base.js').then((analytics) => analytics.init());

2. If someone use a build system without code splitting features, what he need to do is add init call at the the base.js/autotrack.js/multiple-trackers.js and copy bundle version one of them.