Flourish send custom analytics

This is a small helper package designed to send spoor analytics from a custom Flourish template to a parent ft.com / ig.ft.com / app window.

Example usage

The following code will initiate cta click events for tags, tags and tags. You'll want to add a data-trackable attribute (a unique, kebab-cased string) to elements of interest to make it easier to identify them.

import tracking from '@financial-times/flourish-send-custom-analytics';

tracking.init();

If you'd like to add extra contextual information you can add a data attribute called "data-custom" to your html tag. This should be a JSON stringified array of up to three objects with the properties 'name' and 'value'. For example, in React/JSX:

<button id="button" data-trackable="button" data-custom={JSON.stringify([{'name': 'contextual_information_name', 'value': 'contextual_information_value}])}>My button</button>

This package also helps you to track custom events, using a function called sendSpoorEvent. This will send a 'component act' event to Amplitude. The function takes two arguments: triggerAction which is a kebab-case string describing the action that caused the event ("dropdown-change", "video-ended" etc), and extraDetail which is an array of up to three objects with the properties 'name' and 'value'. For example, in React/JSX:

import React, { useState } from 'react';
import tracking from '@financial-times/flourish-send-custom-analytics';

const Dropdown = () => {
  const [dropdownState, setDropDownState] = useState('a');
  return (
    <select
      value={dropdownState}
      onChange={(e) => {
        setDropDownState(e.target.value);
        tracking.sendSpoorEvent('dropdown-change', [{'name': 'dropdown-select', 'value': e.target.value}]);
      }}
    >
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  );
};

export default Dropdown;