Page Analytics Scripts

While Sitecore does provide traffic analytics as part of its massive feature set, marketers are never satisfied and want to be able to add many other Javascript-based analysis and tracking tools to their web pages. Enter Constellation.Feature.PageAnalyticsScripts.

This is a small module that adds a Datasource object to hold your scripts as well as some Renderings to put them on the page. Although super-advanced content authors might be able to use the tool, it was primarily designed to allow Developers to add random Javascript trackers to pages without forcing an HTML code change and deployment.

Supported Scenarios

  • A marketer wants to add a set of Google Analytics tags to all pages on the site.
  • The UX team wants to install heat-map style mouse tracking on the website for a week.
  • While Corporate already has Google Analytics installed for the whole site, Bob in Financial Aid wants his own Google Analytics for just his department.
  • Marcie wants to try out a new tracking tool, but it requires a script to run in the <html><head/> tag.
  • There’s a phone number replacement tool that needs a Javascript placed at the end of the <html><body/> tag.

Features

Warning: In order for Constellation.Feature.PageAnalyticsScripts to work, it enables the saving of Javascript in Rich Text Fields.

Item Template

This module includes a Page Analytics Scripts Item template that has a Rich Text Editor for the following fields:

  • Page Header Script Scripts that need to be rendered in the <head> element
  • Body Top Script Scripts that need to be rendered just after the <body> tag
  • Body Bottom Script Scripts that need to be rendered just before the </body> tag

For some technology (including Google!) it is necessary to include Javascript in both the <head> element as well as towards the end of the <body> element. The Analytics Script Item is designed to allow you to keep all the “moving parts” of a given technology together.

Renderings

There are three Renderings added with this Module, they are predictably:

  • Page Header Scripts
  • Body Top Scripts
  • Body Bottom Scripts

These renderings are each expecting a Datasource Item derived from Page Analytics Scripts. One generally assigns the same Datasource Item to all three Renderings on a given Page. Each Rendering reads from its field, all three renderings together will output the complete script kit required for your instrumentation.

Due to the wide range of information architecture choices in Sitecore, you must specify the Datasource Location for these Renderings. (i.e. Where do you want to store your Analytics Script options.)

Installation

Constellation.Feature.PageAnalyticsScripts is managed via NuGet.

Install Package

In Visual Studio, fire up the Package Manager console and install into a .NET Web Application project:

PM> Install-Package Constellation.Feature.PageAnalyticsScripts

Important: After installing the package, you should build and deploy your solution. Then you must run Sitecore immediately. This will cause the Templates and Rendering Definitions to be installed.

Configure Datasource Locations

After restarting Sitecore, set up your Content Tree location for Page Analytics Script Items and update the Rendering Definitions at:

/Layout/Renderings/Feature/Constellation/Page Analytics Scripts

Create your Scripts Items

If you’re supporting Google Analytics in your site (and who isn’t?) you should create a “Google Scripts” Item in the Datasource Location you configured above. Paste the Google tags into the appropriate fields on the Item.

Repeat this process for any 3rd party scripts you need inserted on page.

Add the Renderings to your Pages

To ensure that every created page gets the Google Analytics scripts, add the Page Heading Scripts, Body Top Scripts, and Body Bottom Scripts renderings to all pages on your site. This can be achieved several different ways:

  1. You can hard-wire the Renderings to your Layout.
  2. You can add the Renderings to the Standard Values of your “Page” Templates.

The downside of option 1 is that you will have to hard-wire the datasource ID for your Scripts Item, making it impossible to alter at runtime. A better solution is option 2, which does require that you have (static) Placeholders defined at appropriate points in your HTML to allow for the Renderings to be inserted at runtime.

Having the Renderings inserted via Placeholder ensures that they will be cached appropriately (default cache options are provided). This also ensures that you can easily adjust the datasources of these Renderings at any time without resorting to re-deploying code or HTML.

Stacking Approaches

It’s not uncommon to have multiple analytics vendors involved at the same time, for example:

  • Google
  • Pardot
  • BazaarVoice

There are two approaches

  1. Merge all the scripts into a single Scripts Item which is then rendered on page with the three Renderings as described above.
  2. Have individual Script Items for each vendor, and have individual Rendering groups for each of these Script Items.

In practice, I’ve seen the first option used far more commonly, because it is easier to update every page of the site by modifying a single Rich Text field, however, if you have analytics kits that don’t appear on every page of your site, you might want to consider more discrete Script items.

Compatibility with “Tag Managers”

If you have a script provider that can consolidate several of these tags into a single script call, I would still recommend using this module, because it exposes the tag managing script as content rather than code. APIs change frequently in the world of Javascript. One can never be too prepared.

Resist the temptation to store local Javascript using this tool. (For example, I would not use this tool to deliver Bootstrap’s Javascript libraries.) These libraries change far less frequently and usually are tightly coupled to the HTML. They don’t belong in Sitecore Items.

Next Steps

Download and Install this package from NuGet. You can also check out the source code here.