A NuxtJS module that injects Snack Video Pixel code with custom tracking functionality
- npm or yarn
- NuxtJS
- NodeJS
$ npm install --save nuxt-snack-video-pixel-module
// or
$ yarn add nuxt-snack-video-pixel-moduleAdd nuxt-snack-video-pixel-module to modules section of nuxt.config.js.
{
modules: [
// Simple usage
'nuxt-snack-video-pixel-module',
// With options
['nuxt-snack-video-pixel-module', {
/* module options */
pixel: 'SNACK_PIXEL_ID',
disabled: false
}],
]
}If you'd like to install the pixel disabled, and enable it later after the user has consented to its use, you can do so by setting disabled: true in the pixel configuration:
Now, in your component, you can call the following in order to start the pixel and track the current page.
this.$kwaiq.enable()For Custom Tracking, you can call the following:
this.$kwaiq.track("addToCart", {
content_type: "product",
content_id: this.product._id,
content_name: this.product.name,
currency: "PKR",
price: this.calculatePrice,
value: this.calculatePrice
});
or
this.$kwaiq.track("purchase", {
content_type: "product",
currency: "PKR",
contents: this.calculateProductArray(this.order.items),
value: this.order.amount.total,
});List of possible options in the module:
| Option | Default | Required | Description |
|---|---|---|---|
| pixel | null | true | The pixel identifier provided by Snack Video business. |
| disabled | false | false | Disable the pixel by default when initialized. Can be enabled later through $kwaiq.enable(). |
[MIT License]