How to add Google Analytics to a Harp boilerplate

This recipe shows you how to add Google Analytics to your Harp application in a configurable manner. This makes it easier for other people to make changes to the Google Analytics settings when digging into the templates.

Adding Google Analytics

First, ensure you've actually created the site details in your Google Analytics account. You'll need to go to your Property Settings and find the Tracking Id value.

Harp

Using Jade

First, create a partial to include Google's embed code.

_shared/analytics.jade

if service.analytics
  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','//www.google-analytics.com/analytics.js','ga');

  ga('create', '<#{ service.analytics }', 'auto');
  ga('send', 'pageview');

Then, set the values in _harp.json or harp.json:

"service": {
  "analytics": "UA-XXXX"
}

Using EJS

First, create a partial to include Google's embed code.

_shared/analytics.jade

<% if(service && service.analytics) { %>
<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', '<%- service.analytics %>', 'auto');
  ga('send', 'pageview');

</script>
<% } %>

Then create the same _harp.json or harp.json described above.