@politico/analytics-tracker
v2.3.3
Published
A tool for page tracking on POLITICO interactives pages.
Downloads
5
Maintainers
Keywords
Readme
@politico/analytics-tracker
A tool for page tracking on POLITICO interactives pages.
Usage
Install this library as a dependency.
$ yarn add @politico/analytics-tracker
Create a folder called analytics
in your utilities
directory (the location of this directory may differ depending on your template). Inside of that, make a filed called events.js
and export constants for each event you want to track. (See Naming Your Events for more.)
export const ACTION_NAME_ONE = 'action-one';
export const ACTION_NAME_TWO = 'action-two';
export const ACTION_NAME_THREE = value => `action-three:${value}`;
There are two ways to use the analytics tracker depending on your template and personal preference.
As a Class
You can use the tracker as a class. If you need to track different things in different React components for example, you should instantiate it outside of your components, and import it as a module.
To use it as a class, create a file in your analytics
directory called index.js
. In it, instantiate a new tracker. You'll need to pass a configuration object (see Creating a Tracking Conf for more).
// analytics/index.js
import { AnalyticsTracker } from '@politico/analytics-tracker';
const tracker = new AnalyticsTracker(conf);
export default tracker;
Then you can import it along with an event string and use its event
method, passing the name of the event as an argument.
// Some file with an action that should be tracked
import tracker from './path/to/analytics/';
import { ACTION_NAME_ONE } from './path/to/analytics/events.js';
tracker.event(ACTION_NAME_ONE);
tracker.event(ACTION_NAME_THREE('my-value'));
You can also track a page view (for use in SPAs) by invoking the class's view
method, passing the name of the view (or the pageName
in typical utag parlance) as the argument.
// Some file with an action that should be tracked
import tracker from './path/to/analytics/';
import { ACTION_NAME_ONE } from './path/to/analytics/events.js';
tracker.view('Page 2');
As a React Hook
You can also use it as a React hook. Pass the same conf into the useTracker
hook to receive an object with a trackEvent
key and a trackView
key for their respective actions.
For ease of use, you should create a file in your analytics
directory called index.js
. In it, create a hook that returns the value of this hook while passing the conf object (see Creating a Tracking Conf for more). This way you only have to do it once.
import { useTracker } from '@politico/analytics-tracker';
import conf from '../path/to/conf';
export default function useMyTracker(){
return useTracker(conf);
}
import useMyTracker from './path/to/analytics';
import { ACTION_NAME_ONE } from './path/to/analytics/events.js';
const MyComponent = props => {
// ...
const {trackEvent, trackView} = useMyTracker();
const onButtonClick = () => {
trackEvent(ACTION_NAME_ONE)
trackView(props.pageName);
}
// ...
}
Creating a Tracking Conf
The definition for the tracking conf is the following. As a reminder params
wrapped in []
are optional.
/**
* A configuration object.
* @param {Object} conf
* @param {String} conf.appName - The name of your app. See below for more.
* @param {String} conf.siteSection - The section of the site the app belongs to. Usually either "politics" or "elections".
* @param {String} [conf.pageType=interactives] - Either "interactives" or "2020 Elections"
* @param {String} [conf.pageSubType] - Usually the name of the app or a broader package the app belongs to. See Mitch if you're not sure if you need one.
* @param {String} [conf.adUnitSection=politics] - Almost always "politics".
* @param {String} [conf.freePaidContent=free] - Almost always "free".
* @param {Object[]} conf.authors - A list of authors
* @param {String} conf.authors[].name - The name of the author
* @param {String} [conf.authors[].link] - A link to the authors bio
*/
Naming Your App
Each project should have its own app name. This value must be unique across all interactives and cannot have spaces. The easiest thing to use is the slug of your project. That will ensure it is unique and spaceless.
Naming Your Events
Event names should also be spaceless. If you have multiple groups of events, you can prefix your events with the name of the group followed by a colon.
For example, in my app, I have two views. One is called List
and the other is called Detail
. I might make the events related to actions in my List
view something like list:nav-button-click
and list:expand-button-click
.
You may also have a situation where you have a list of slightly different variations on an action. In this case, rather than making one event for every vartion you can make a functional event.
For example, I have a datepicker with every year from 2000 to 2010. Instead of making one event for each date in the datepicker, I can use a functional event like this:
export const DATE_PICKED = date => `datepicked:${date}`;
Then when I want to use it I can pass a value to that event such as:
tracker.event(DATE_PICKED('2012'));
Finding The Data
So you've gone through all the work to track interactivity, but how do you find the results of this testing?
- Go to the Omniture login
- Choose to use the Experience Cloud login
- Use the login for Adobe in the 1Password (the one for
[email protected]
, not your personal one). - In "Workspace", make a new project (or edit an existing one of yours)
- Drag "Interactives" (the dimension) on to the Freeform table. Then drop "Interactive Interaction" as a metric.
- Then you can use the filter options on interactions to filter for only:
interactives:YOUR-APP-NAME
.