# @adhawk/analytics-pixel-loader

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

Latest version **2.0.2** (published 2022-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @adhawk/analytics-pixel-loader
pnpm add @adhawk/analytics-pixel-loader
yarn add @adhawk/analytics-pixel-loader
bun add @adhawk/analytics-pixel-loader
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-03-11 |
| First published | 2020-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 205 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | developers@tryadhawk.com |
| Maintainers | stephengrable1, adhawk, janeosaur, stephengrable |

## Links

- npm: https://www.npmjs.com/package/@adhawk/analytics-pixel-loader
- Repository: @adhawk/feathers
- npm.io page: https://npm.io/package/@adhawk/analytics-pixel-loader

## Dependencies (7)

- [tslib](https://npm.io/package/tslib.md) ^2.0.2
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.13.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [schema-utils](https://npm.io/package/schema-utils.md) ^3.0.0
- [@types/js-yaml](https://npm.io/package/@types/js-yaml.md) ^3.12.1
- [lodash.kebabcase](https://npm.io/package/lodash.kebabcase.md) ^4.1.1
- [@segment/analytics.js-core](https://npm.io/package/@segment/analytics.js-core.md) ^4.1.5

## Recent versions

- 2.0.2 (latest) — 2022-03-11
- 2.0.1 — 2020-10-14
- 2.0.0 — 2020-10-14
- 1.2.9 — 2020-10-09
- 1.2.8 — 2020-08-14
- 1.2.7 — 2020-05-15
- 1.2.5 — 2020-04-04
- 1.2.3 — 2020-03-18
- 1.2.2 — 2020-03-16
- 1.2.1 — 2020-03-13
- 1.2.0 — 2020-03-09
- 1.1.1 — 2020-03-02
- 1.1.0 — 2020-02-25
- 1.0.6 — 2020-02-24
- 1.0.5 — 2020-02-19
- … 9 more at https://npm.io/package/@adhawk/analytics-pixel-loader/versions

## 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

```sh
yarn add @adhawk/analytics-pixel-loader
```

2. Create an `analytics-pixel.yml` file with your Segment config

```yaml
---
- name: Google Analytics
  opts:
    trackingId: UA-123
    sendUserId: true
```

3. Setup webpack loader to build the pixel

```javascript
module: {
  rules: [
    {
      test: /analytics-pixel\.yml$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "@adhawk/analytics-pixel-loader",
      },
    },
  ];
}
```

4. Import the analytics pixel in your main entrypoint:

```javascript
// index.js

import "./analytics-pixel.yml";
```

5. Start tracking

```javascript
<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:

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

---
_Source: https://npm.io/package/@adhawk/analytics-pixel-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._