# nuxt-multi-tracker

> Nuxt Multi Tracker

Latest version **0.3.3** (published 2023-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-multi-tracker
pnpm add nuxt-multi-tracker
yarn add nuxt-multi-tracker
bun add nuxt-multi-tracker
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2023-12-12 |
| First published | 2023-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 112.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | niklasfjeldberg |
| Keywords | nuxt, nuxt3, pixel, analytics, tracker, event tracker, meta, facebook, google, ga4, twitter, reddit |

## Links

- npm: https://www.npmjs.com/package/nuxt-multi-tracker
- Repository: https://github.com/niklasfjeldberg/nuxt-multi-tracker
- Homepage: https://github.com/niklasfjeldberg/nuxt-multi-tracker#readme
- Issues: https://github.com/niklasfjeldberg/nuxt-multi-tracker/issues
- npm.io page: https://npm.io/package/nuxt-multi-tracker

## Dependencies (5)

- [defu](https://npm.io/package/defu.md) ^6.1.3
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^3.8.2
- [js-sha256](https://npm.io/package/js-sha256.md) ^0.10.1
- [iso-3166-1](https://npm.io/package/iso-3166-1.md) ^2.1.1
- [currency-codes](https://npm.io/package/currency-codes.md) ^2.1.0

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.3.3 (latest) — 2023-12-12
- 0.3.2 — 2023-12-12
- 0.3.0 — 2023-12-07
- 0.2.0 — 2023-12-04
- 0.1.0 — 2023-12-03
- 0.0.3 — 2023-12-03

## README

# Nuxt Multi Tracker

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Nuxt 3 module that simplifies and unifies the use of tracking pixel's and Conversion APIs for most popular social media networks.

> [!WARNING]
> This module is under development. It will break and how it functions will change. To debug it's recommended to use an extension such as "[Analytics/GTM/Pixel Debugger](https://chromewebstore.google.com/detail/analyticsgtmpixel-debugge/canpneabbfipaelecfibpmmjbdkiaolf)".

- ✨ [Release Notes](/CHANGELOG.md)
- 🏀 [Online playground](https://stackblitz.com/https://github.com/niklasfjeldberg/nuxt-multi-tracker/tree/master/playground)
  <!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

- Minimal dependencies
- Manual consent management for GDPR compliance
- Track events manually with composables
- Fully typed
- SSR-ready
- Supported pixels:
  - Meta (Facebook) pixel
  - Reddit pixel
  - Twitter pixel (alpha)
  - Google Analytics 4 (GA4) (alpha)

## Table of Contents

- [Install](#install)
- [Setup & basic Usage](#setup--basic-usage)
- [Module Options](#module-options)
- [Composables](#composables)
- [Development](#-development)

## Install

```bash
# Using pnpm
pnpm add -D nuxt-multi-tracker

# Using yarn
yarn add --dev nuxt-multi-tracker

# Using npm
npm install --save-dev nuxt-multi-tracker
```

## Setup & basic usage

With the following configuration the pixels with IDs will track page views.

```js
export default defineNuxtConfig({
  modules: ['nuxt-multi-tracker'],

  multiTracker: {
    initialConsent: false,
    meta: {
      pixelID: 'xxxxxxx',
    },
    reddit: {
      disable: true,
      pixelID: 'xxxxxxx',
    },
  },
});
```

## Module Options

### Options for all pixels

These options will affect all pixels, but an option on the individual pixel will override these options if they are in conflict.

| Option            | Type                 | Default   | Description                                                    |
| ----------------- | -------------------- | --------- | -------------------------------------------------------------- |
| `debug`           | `boolean`            | `false`   | Whether to show detailed info log of what each pixel is doing. |
| `autoPageView`    | `boolean`            | `true`    | Whether to track standard `track` value for all pixels.        |
| `initialConsent`  | `boolean`            | `true`    | Whether to initially consent to tracking.                      |
| `loadingStrategy` | `'async' \| 'defer'` | `'defer'` | The loading strategy to be used for all pixel scripts.         |
| `disabled`        | `boolean`            | `false`   | If all pixels should be disabled at start.                     |

### Options for each pixels

Options for each individual pixel, most pixels have all of these options.

| Option     | Type      | Default       | Description                                  |
| ---------- | --------- | ------------- | -------------------------------------------- |
| `pixelID`  | `string`  | `null`        | The id of the pixel.                         |
| `disabled` | `boolean` | `false`       | If the pixel should be disabled at start.    |
| `track`    | `string`  | `[page view]` | The event that will be standard for `track`. |
| `version`  | `string`  | `[latest]`    | Version to be used of pixel script.          |

### Meta (Facebook) options

| Option       | Type      | Default | Description                                                              |
| ------------ | --------- | ------- | ------------------------------------------------------------------------ |
| `manualMode` | `boolean` | `false` | Manual mode will disable automatic event tracking such as button clicks. |

### Reddit options

| Option                     | Type      | Default | Description                                  |
| -------------------------- | --------- | ------- | -------------------------------------------- |
| `disableFirstPartyCookies` | `boolean` | `false` | If the pixel should use first party cookies. |

## Composables

### `useConsent`

```ts
const {
  // Output is a boolean
  haveConsent,
  // No input or output
  grantConsent,
  revokeConsent,
} = useConsent();
```

### `useMultiTracker`

This composable uses the Meta pixel as default, meaning you should use Meta event names and user data. This composable works the same way as all others.

```ts
const { track, init, setUserData } = useMultiTracker();
```

### `usePixelMeta`, `usePixelReddit`, `usePixelTwitter`, `usePixelGoogle`

```ts
const {
  options,
  setPixel,
  setPixelId,
  setUserData,
  enable,
  disable,
  track,
  query,
  init,
} = usePixel...();
```

How to use `track()`.

```
// Uses default event name, the standard option is a page view
track()

// Spesify wich event you want to trigger
track('Lead')

// Custom event names will automatically be recognised and sent correctly
track('CustomEventName1')

track('Lead', {
  eventID: 'xxxxxxxxx' // Set eventID to duplicate events
  ...
  // All parameters are set in this object
})

```

How to use `init()` and related functions.

```
// Uses the default pixel ID
init()

// Will change the ID of the pixel in `options` and run `init()`
setPixelID('xxxx')

// Will set userdata in `options` and run `init()`. Se the type for all possible parameters.
setUserData({
  em: 'example@example.com',
  ...
})

```

How to use `query()`. This is a wrapper for the respective functions (`fbq`, `rdt`, `gtag`, etc.), and you can always use the functions directly if you prefer that.

```
query('track', {
  eventName: 'Lead',
  eventID: 'xxxxxx'
  .....
  // All parameters goes in this object
})
```

## 💻 Development

1. Clone this repository
2. Install dependencies using `npm install`
3. Run `npm run dev:prepare`
4. Start development server using `npm run dev`

Read "[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)" for naming your commits.

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/nuxt-multi-tracker/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-multi-tracker
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-multi-tracker.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-multi-tracker
[license-src]: https://img.shields.io/npm/l/nuxt-multi-tracker.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-multi-tracker
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com

---
_Source: https://npm.io/package/nuxt-multi-tracker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._