vsf-facebook-pixel

Facebook Pixel module for Vue Storefront.

Facebook Pixel documentation: https://developers.facebook.com/docs/facebook-pixel

Main features

This module enables you to seamlessly implement Facebook Pixel functionality to your Vue Storefront app, featuring generation of standard Facebook Pixel events out-of-the-box:

• PageView - default event on triggered on every route change

• ViewContent - triggered on entering pages/Product.vue route. Available object properties:

  • content_ids (viewed Product SKU)
  • content_name (viewed Product Name)
  • content_type (set as product)
  • currency (current Store View currencyCode)
  • value (viewed Product Price)

• AddToCart - triggered after Product is added to Cart. Available object properties:

  • content_ids (added Product SKU)
  • content_name (added Product Name)
  • content_type (set as product)
  • value (added Product price * qty)
  • currency (current Store View currencyCode)

• AddToWishlist - triggered after Product is added to Wishlist. Available object properties:

  • content_ids (added Product SKU)
  • content_name (added Product Name)
  • content_type (set as product)
  • value (added Product price * qty)
  • currency (current Store View currencyCode)

Installation

1. Download the module

Go to your vue-storefront's modules catalog and clone the repository with the module.

cd ../vue-storefront/src/modules;
git clone https://github.com/new-fantastic/vsf-facebook-pixel.git;

2. Import and register the module

Go to ../vue-storefront/src/modules/index.ts and add code below

import { VsfFacebookPixel } from './vsf-facebook-pixel'
...
export const registerModules: VueStorefrontModule[] = [
...
VsfFacebookPixel
...
]

3. Add new settings to your config

Go to ../vue-storefront/config/local.json and add code below

"facebookPixel" : {
   "id" : "123456789012345"
}

4. Set the module to be ignored by ESLint

Go to ../vue-storefront/.eslintignore and add code below

src/modules/vsf-facebok-pixel

And that's it! You're good to go :)

Roadmap

Standard events out-of-the-box:

• [x] PageView
• [x] ViewContent
• [x] AddToCart
• [x] AddToWishlist
• [ ] InitiateCheckout
• [ ] Purchase
• [ ] Search