Google Analytics enhancements github location npm version

Supplementary behaviour (primarily JavaScript) to ease tracking with Google Analytics.

/* vf-analytics-google template file */

Example of form tracking attributes

HTML
<div class="vf-analytics-google">
  /* vf-analytics-google template file */

  <h3>Example of form tracking attributes</h3>
  <input type="radio" name="radio-button-group" id="radio-2" class="vf-form__radio">
  <label for="radio-2" class="vf-form__label" data-vf-analytics-label="A special form option">Form Label</label>

  <input type="radio" name="radio-button-group" id="radio-3" class="vf-form__radio">
  <label for="radio-3" class="vf-form__label" data-vf-analytics-label="I am also a special label">Form Label</label>

</div>
              

Usage

User actions

This component tracks three types of user engagement as actions in Google Analytics:

  1. General clicks in the browser as "UI" category
  1. Downloads of files as "Downloads" zip|exe|pdf|doc*|xls*|ppt*|mp3|txt|fasta
  2. Emails links as "Email" mailto:
  3. External links as "External links"

Explicit labels can be provided with data attributes:

Meta tags

Track dimensions:

<meta name="vf:page-type" content="category;pageTypeHere">

How to add dimension to your property?

Page region tracking

You can track the region of the page where an event occurs:

<div data-vf-google-analytics-region="main-content-area-OR-SOME-OTHER-NAME">
<a href="//www.example.com">My link here</a>
</div>

Notes:

Verbose logging

<body data-vf-google-analytics-verbose="true">

JavaScript

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfGaIndicateLoaded } from 'vf-analytics-google/vf-analytics-google';
// Or import directly
// import { vfGaIndicateLoaded } from '../components/raw/vf-analytics-google/vf-analytics-google.js';

let vfGaTrackOptions = { vfGaTrackPageLoad: true, vfGaTrackNetwork: { serviceProvider: 'dimension2', networkDomain: 'dimension3', networkType: 'dimension4' } }; vfGaIndicateLoaded(vfGaTrackOptions);

vfGaIndicateLoaded() is the primary function and awaits and checks to see if Google Analytics client side JS has loaded. If it does, sets <body data-vf-google-analytics-loaded='true'>

Options

vfGaIndicateLoaded() accepts these options for object vfGaTrackOptions:

vfGaIndicateUnloaded()

Utility method to invalidate prior GA check <body data-vf-google-analytics-loaded='false'>

vfGaTrackInteraction()

Can be used to directly track events if you wish to use your own event handler.

/**
* This code tracks the user's clicks in various parts of the site and logs them as GA events.
*
* Dev note:
* add class verbose-analytics to your body for a readout to console on clicks.
*
* @param {element} actedOnItem
* @param {string} customEventName Event action
* @example
* jQuery(".analytics-content-footer").on('mousedown', 'a, button', function(e) {
*   vfGaTrackInteraction(e.target,'Content footer');
* });
* /
Installation info

This repository is distributed with npm. After installing npm, you can install vf-analytics-google with this command.

$ yarn add --dev @visual-framework/vf-analytics-google

Sass/CSS

  • There is currently no Sass/css needed for this component.

Changelog

Changelog

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-analytics-google

Find an issue on this page? Propose a change or discuss it.