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';



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.


  1. Install the package
yarn add @adhawk/analytics-pixel-loader
  1. Create an analytics-pixel.yml file with your Segment config
- name: Google Analytics
    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:

  content='{"Google Analytics": {"trackingId": "123"}}'