dha-analytics

A module for implementing Google Measurement Protocol into PWA apps that were created with DHA SDK pwa-starter and/or create-react-app.

A Note About Version 3.0

While 3.0 should still be compatible with the PWA Starter using Create React App, A change in the way you import enviornment variables was made to align with the new Tailwind starter, if you encounter any issues with it please revert to 2.0 of dha-analytics.

Getting Started

Install

Install from npm:

• npm i dha-analytics

Google Analytics Account

• You must have a Google Analytics account setup before using this package.

Analytics Module

.env config

• Create a ".env or .env.development" file at the root of your application with parameters that are sent with every request to GA. Note: "REACT_APP_TRACKER_XYZ" becomes "xyz" when passed to GA:

• See Google Analytics for complete parameter reference: https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters

Tailwind Starter:

# Required params:
VITE_TRACKER_V=1
VITE_TRACKER_TID=UA-XXXXXXXXX-1
VITE_TRACKER_DS=app

# Dimensions Required for inclusion in DAP:
VITE_TRACKER_CD1=DOD
VITE_TRACKER_CD2=DOD - MHS

VITE_TRACKER_AIP=1

CRA Starter:

# Required params:
REACT_APP_TRACKER_V=1
REACT_APP_TRACKER_TID=UA-XXXXXXXXX-1
REACT_APP_TRACKER_DS=app

# Dimensions Required for inclusion in DAP:
REACT_APP_TRACKER_CD1=DOD
REACT_APP_TRACKER_CD2=DOD - MHS

REACT_APP_TRACKER_AIP=1

Home.tsx - Functional component

import { Button } from '@material-ui/core';
import { Tracker } from 'dha-analytics';
import React, { useEffect } from 'react';

const Home = () => {
  const path = window.location.hash;
  const tracker = Tracker();

  useEffect(() => {
    tracker({ dh: 'example.com', dp: path, dt: 'App', t: 'pageview' });
  });

  const handleClick = (event: React.ChangeEvent<{}>) => {
    tracker({
      dp: path,
      ea: 'handleClick',
      ec: 'click',
      el: 'clickButton',
      ev: '1',
      t: 'event',
    });
  };

  return (
    <Button color="primary" onClick={handleClick} variant="contained">
      Click
    </Button>
  );
};

export default Home;

Home.tsx - Class component

import { Button } from '@material-ui/core';
import { Tracker } from 'dha-analytics';
import React from 'react';

class Home extends React.Component {
  private path = window.location.hash;
  private tracker = Tracker();

  componentDidMount(): void {
    this.tracker({ dh: 'example.com', dp: this.path, dt: 'App', t: 'pageview' });
  }

  handleClick = (event: React.ChangeEvent<{}>) => {
    this.tracker({
      dp: this.path,
      ea: 'handleClick',
      ec: 'click',
      el: 'clickButton',
      ev: '1',
      t: 'event',
    });
  };

  render() {
    return (
      <Button color="primary" onClick={this.handleClick} variant="contained">
        Click
      </Button>
    );
  }
}

export default Home;

Contribute

see Github wiki

NPM

https://www.npmjs.com/package/dha-analytics

License

pending