@adhawk/analytics-pixel-loader

A webpack loader which builds Segment analytics.js pixels as small, efficient bundles

Usage no npm install needed!

<script type="module">
  import adhawkAnalyticsPixelLoader from 'https://cdn.skypack.dev/@adhawk/analytics-pixel-loader';
</script>

README

@adhawk/analytics-pixel-loader

This packages export a React component which will wrap React components to catch errors. A user is shown a dialog to give feedback when they experience an error.

Setup

  1. Install the package
yarn add @adhawk/analytics-pixel-loader
  1. Create an analytics-pixel.yml file with your Segment config
---
- name: Google Analytics
  opts:
    trackingId: UA-123
    sendUserId: true
  1. Setup webpack loader to build the pixel
module: {
  rules: [
    {
      test: /analytics-pixel\.yml$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "@adhawk/analytics-pixel-loader",
      },
    },
  ];
}
  1. Import the analytics pixel in your main entrypoint:
// index.js

import "./analytics-pixel.yml";
  1. Start tracking
<button onClick={() => analytics.track("Button Clicked", { foo: "bar" })} />

Overriding a Page's Analytics Configuration

To override an analytics configuration for a page, simply add a meta tag with the JSON you would like to use as the configuration:

<meta
  name="analytics-config"
  content='{"Google Analytics": {"trackingId": "123"}}'
/>