axllent/silverstripe-analytics-js

Google Universal Analytics tracking code for Silverstripe

Installs: 16 464

Dependents: 0

Suggesters: 0

Security: 0

Stars: 15

Watchers: 4

Forks: 4

Open Issues: 1

Type:silverstripe-vendormodule

4.0.3 2023-05-11 03:43 UTC

This package is auto-updated.

Last update: 2024-04-16 02:40:39 UTC


README

An extension to add Google Universal Analytics gtag() tracking code (not to be confused with Google Tag Manager) to your Silverstripe templates.

It automatically includes optional unobtrusive event tracking for all outbound links & "asset downloads", as well as event tracking for 404 and error pages, email & telephone links.

Features

  • Google Universal Analytics (gtag.js) code injected automatically into <head> of page to prevent JavaScript conflicts due to loading order (if you are using custom gtag() functions in your other code.
  • Automatic pageview tracking for all configured accounts, including tracking of 404 & 500 page errors (tracked as "Page Not Found" / "Page Error" events).
  • Unobtrusive outbound, download, email & tel: link tracking - monitors all page clicks, rather than on page load (ie: works with links including those generated by Ajax etc on the page after page load).
  • Uses Google Analytics hitCallback for tracking for outgoing links to register before load (ie: when no link target is set) to ensure tracker is successfully run before redirection.
  • Tracking codes are automatically changed to UA-DEV-[1-9] if SS_ENVIRONMENT_TYPE is not live, or if page URL matches ?flush= to prevent bad data capture.

Event tracking

Additional event tracking is automatically enabled by default for:

  • File downloads (all non-image files in the assets folder) are tracked as "Downloads".
  • Outgoing links are tracked as "Outgoing Links".
  • Email (mailto:) links are tracked as "Email Links".
  • Phone (tel:) links are tracked as "Phone Links".

Event category names (eg: "Outgoing Links", "Downloads" etc) can be configured in your yaml config.

Note: Event tracking only works with regular (left-or-middle) mouse button clicks (including combinations with Ctrl/Shift/Meta keys). Tracking is bypassed if the user right-clicks on a link and selects an action from the context menu (open in new tab, save as etc...). Unfortunately there is no way around this without disabling the content menu entirely.

Requirements

  • Silverstripe ^4 || ^5

For the deprecated analytics.js tracking method for Silverstripe 4, please refer to the analytics.js branch.

For Silverstripe 3, please refer to the Silverstripe3 branch.

Installation via Composer

You can install it via composer with

composer require axllent/silverstripe-analytics-js

Basic usage

Once installed the extension is automatically loaded if you provide at least one tracking account in your config yaml file (eg) mysite/_config/analytics.yml

Axllent\AnalyticsJS\AnalyticsJS:
  tracker:
    - ['config', 'UA-1234567-1']

The syntax is very similar to the official documentation, so things like secondary trackers or other configurations can be easily added.

Axllent\AnalyticsJS\AnalyticsJS:
  tracker:
    - ['config', 'UA-1234567-1']          # default account [required]
    - ['config', 'UA-1234567-2']          # add secondary tracker
    - ['set', 'forceSSL', true]           # force tracking to use SSL
    - ['require', 'ecommerce', 'ecommerce.js']  # load ecommerce extension
  track_links: false                      # disable external link & asset tracking
  ignore_link_class:  "notrack"           # if "track_links", then ignore external links with the "notrack" class
  compress_js: false                      # do not compress inline JavaScript
  primary_gtag_id: "UA-1234567-1"         # set the default tracking id to be used when loading gtag (defaults to the first tracker)

Please refer to the Configuration.md for all configuration options.

To start live tracking, make sure your website is in live mode, or if running in dev or staging that you have the track_in_dev_mode: true option.