College of Education and Human Development wordmark.

Google Analytics macro

The macro for tracking click events will make it easier to consistently track events—including links to other sites.

Step one: include the macro

You have to include the macro to be able to use it. Macros are organized in app_routing/templates/macros

Make sure you put it at the top, preferably just after the "extends" declaration at the top:

{% extends "cehd/layout/section.html" %}
{%- import "macros/ga-tracking.html" as analytics -%}{# <-- the GA tracking macro #}
            

Step Two: Use the macro

In the past we've included code like this for click tracking:

<a href="/link" onclick="ga('send', 'event', 'how to apply', 'click', 'csppmain');">Link</a>

That's a bad practice for two reasons:

  1. It violates separation of concerns by mixing JavaScript in with the HTML
  2. It will never be executed on a page that leaves the website

This site has JavaScript included in it on every page that is set up to work with the code that the GA tracking macro inserts.

Using the macro follows a very similar pattern, but looks like this instead:

<a href="/link/" {{ analytics.add_tracking("send", "event", "how to apply", "click", "csppmain") }}>link</a>