Published ga-dnt-analytics to webcomponents.org

Need a Google Analytics custom element with Do Not Track and debug support? This is the one for you.

2 min read Filed in Web

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:

ga-dnt-analytics in DevTools console

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.