vsf-facebook-pixel

✨ Facebook Pixel module for Vue Storefront ✨

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

Table of Contents

• Main features

• Installation

• License

  
  

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:

Standard Facebook Pixel events

Event name	Description	Passed parameters
PageView	Triggered on every route change.	No event-specific parameters
Search	Triggered when SearchPanel input has text	- search_string (search input value)
AddToCart	Triggered after Product is added to Cart.	- 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.	- 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)
InitiateCheckout	Triggered after Checkout is created.	- content_category (set as 'product') - content_type (set as 'product') - content_ids (Cart Products SKUs) - contents (Cart contents - SKU, Price, Qty) - currency (current Store View currencyCode) - num_items (number of items in Cart) - value (Cart Price for Checkout)
Purchase	Triggered after Checkout success.	- content_type (set as 'product') - content_ids (bought Products SKUs) - contents (Checkout Cart contents - SKU, Price, Qty) - currency (current Store View currencyCode) - num_items (number of bought items in Cart) - value (Checkout Total Price)

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/facebook-pixel.git;

2. Import and register the module

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

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

3. Add new settings to your config

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

"facebookPixel" : {
  "id" : "123456789012345",
  "useParentSku": true
}

useParentSku - whether use parent (configurable product)'s sku or simple product's sku - true for parent

4. Add ViewContent event

Go to your product's view and just import ViewContent mixin:

import fbqViewContent from 'src/modules/vsf-facebook-pixel/components/ViewContent'

export default {
  // ...
  mixins: [
    // ...
    fbqViewContent
  ],
}

5. Add Search event

Go to your SearchPanel component, import Search mixin, Pixel's event will be dispatched after provided field change (there is watcher on field provided as argument to the mixin):

import fbqSearch from 'src/modules/vsf-facebook-pixel/components/Search'

export default {
  // ...
  mixins: [
    // ...
    fbqSearch('search')
  ]
}

E.g. above code will watch changes in search field. There is also second optional argument debounceTime which allows you to specify debounce time while user typing query in search field.

useParentSku - whether use parent (configurable product)'s sku or simple product's sku - true for parent

And that's it! You're good to go – the module automatically creates Facebook Pixel events. No need for additional configuration! 😎

Different FBPixel ID for certain storecode

If you want dedicated FBPixel ID for certain storecode you need to set key named in pattern id_<storeCode>. Example for es storecode:

"facebookPixel" : {
  "id" : "123456789012345",
  "id_es": "someSpecialPixelID",
  "useParentSku": true
}

If corresponding configuration for current storecode is hasn't been set - module will just use value of id key as a fallback.

License

This project is licensed under the MIT License - see the LICENSE file for details.