/vsf-facebook-pixel

✨ Facebook Pixel module for Vue Storefront ✨

Primary LanguageTypeScriptMIT LicenseMIT

VSF Facebook Pixel


✨ Facebook Pixel module for Vue Storefront ✨
Requires VSF 1.11+

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


Table of Contents


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.