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

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

License

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