If you happen to have read my last piece on building the progressive nature of this blog, you’ll note I made mention of blog-analytics
. This was something I made specifically to handle a few cases around the routing of the site (listening to things from app-route
).
This works fine, but with it buried in that experiment it wasn’t much use to me or anyone else. So instead, I pulled it out for easier use into <ga-dnt-analytics>
.
Using our element
The one thing that I’ve never been a fan of is debugging Google Analytics. It’s not that it can’t be done, but it was never very developer friendly in my workflow. With <ga-dnt-analytics>
I seek to resolve that.
For instance, I want to debug:
<ga-dnt-analytics debug="true"></ga-dnt-analytics>
Great! Now I look at my console and low and behold:
Now I’d like to turn on production. Let’s update our element:
<ga-dnt-analytics key="UA-XXXXX-XX"></ga-dnt-analytics>
With that, I can now use JavaScript to send any payload I like:
document.querySelector('blog-analytics').send({
hitType: 'pageview',
page: window.location.pathname,
location: window.location.href,
title: 'My Title'
});
Or, if I’m just stamping this on every page, I can just set it to ping on pageview:
<ga-dnt-analytics pageview="true"></ga-dnt-analytics>
Why Do Not Track support?
The Do Not Track support comes for the very slick piece of code written by Mozilla’s Schalk Neethling. Why support it? Because I believe if a user doesn’t want me pinging for analytics, I should respect that. Seems even more relevent today than ever.
Where to get it
I’ve published the element on the new webcomponents.org, and you’re just an install away via bower:
bower i justinribeiro/ga-dnt-analytics --save
Have an issue? Let me know on the repo: justinribeiro/ga-dnt-analytics.