Google Analytics Events for Umbraco
A package for adding manageable GA Event Tracking to your Umbraco site.
Install
- Install the Google Analytics Events for Umbraco package
- 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 UmbracoGAEventTrackingIncluding 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 |
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 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 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