Data Visuals Analytics
An easy way to hook up Google Analytics (and any future trackers!) in Data Visuals projects.
Installation
npm install @data-visuals/analyticsUsage
Two of autotrack's plugins are included in this library — cleanUrlTracker and eventTracker. cleanUrlTracker is already pre-configured and requires no extra work, but eventTracker only enables what's detailed in the documentation for that plugin and will require extra tagging in your HTML.
This library does not load the Google Analytics library for you. You'll still need to ensure that makes it on the page. However, @data-visuals/analytics expects that to happen asynchronously so it can be loaded at any time.
In your HTML (either right before your <body> element closes, or at the bottom of the <head>), load the Google Analytics library.
<!-- Google Analytics -->
<script async src="https://www.google-analytics.com/analytics.js"></script>
<!-- End Google Analytics -->The library exports an init() function to be called. It's recommended that you use Webpack's code splitting functionality (if your environment supports it) to load this library so nothing is blocked by its loading.
import(/* webpackChunkName: "analytics" */ '@data-visuals/analytics').then(
analytics => analytics.init()
);If for some reason you don't want to do that, or you're using this somewhere that isn't allowed, importing it and calling it normally will also work.
import { init } from '@data-visuals/analytics';
init();API
init
Initializes all the analytics setup. Creates trackers and sets initial values on the trackers.
Parameters
-
optionsObject (optional, default{})
Examples
// Async method
import('@data-visuals/analytics').then(analytics => analytics.init());
// Standard import method
import { init } from '@data-visuals/analytics';
init();Returns void
License
MIT