Google Analytics Events for Umbraco

PasswordGenerator Logo

A package for adding manageable GA Event Tracking to your Umbraco site.

Install

  1. Install the Google Analytics Events for Umbraco package
  2. Include the event tracking script via the HTML helper anywhere AFTER you have included Google Analytics in your master template page.

Adding Using Statement

Make sure to add a using to access the HTML helpers. Typically you do this at the top of the razor template

@using UmbracoGAEventTracking

Including Google Analytics

For your convenience, we have a handy HTML helper available for outputting the Google Analytics script.

You do not have to use this method if you have already included Google Analytics included but if you do, make sure to set your API key.

@Html.IncludeGoogleAnalytics()

Set your API key in the properties of the Root Event Tracking content node

Including the Tracking Script

Next, just add this bit of razor code anywhere AFTER you include GA in your master template

@Html.IncludeGaEventTracking()

How to Use

After installing the package you will see that we have added a whole bunch of events for you

Feel free to delete these if you wish, they are just there to help you get going.

Standard Events

These events are aimed at making the process easier for simple events that don't require a huge amount of configuration

Using stardard events makes things quicker and easier but give you less control over the label and less actions to choose from

90 % of the time we only expect you to need standard events

Advanced Events

These events are for when you need more control

The label field lets you specify a template string to use. For example, "My label string {PAGE_URL}"

Below are all the placeholder tokens that can be used. When an event happens, the token value will be replaced with the appropriate values

Labels are handled in the exact same way in standard events. You just use a checkbox list to select your placeholder tokens instead of having to manually type them.

Label Placeholders

Name Placeholder Description
Page Url {PAGE_URL} Replaced by the current page URL
PageRelativeUrl {PAGE_RELATIVE_URL} Replaced by the page's relative URL
TagName {TAG_NAME} Replaced by the name of the tag clicked
ID {ID} Replaced by the ID of the element. Empty string if no ID set
Class {CLASS} Replaced by the class set on the element. Empty string if none set
Value {VALUE} Replaced by the value of the element clicked
Source {SRC} Replaced with Src value of the element if appropriate
Link URL {LINK_URL} Replaced by the href URL set on an anchor tag
Link Relative Url {LINK_RELATIVE_URL} Replaced by the href relative URL set on an anchor tag
Alt {ALT} Replaced by alt value of element
Title {TITLE} Replaced by title value of element
Inner HTML {INNER_HTML} Replaced by the inner HTML of the element
Need another placeholder token? Create an issue

Common CSS Selectors

Name CSS Selector
External Link a[target="_blank"]
Footer Link footer a
Form form
Image img
Main Navigation nav a
PDF Download a[href$= ".pdf"]
Header 1 h1

Who Made This?

This package was lovingly created by Luke Warren and Paul Seal

Special Thanks To

Syncrony logo

Syncrony specialises in custom web development, and having constructed many large and small solutions over the years, including: Websites, Intranets, Help Desks and ERP systems, we can develop a solution to fit your needs.

and

MEDIAmaker logo

MEDIAmaker is a multi-channel communications agency that exists to help organisations communicate their messages to customers, employees and partners. They are based in Nottingham and London in the UK with clients worldwide.

How do I Contribute?

First off, please create an issue before coding away and putting in a pull request.

Getting the Demo Project Working

The actual umbraco package is contained in a separate project in the Visual Studio solution.

Building this project will automatically copy over all necessary files to the Demo website project. You then can use this Demo to test with.

Demo Login:

User: admin@test.com Password: password123