wemake-services/vue-analytics-facebook-pixel

A small wrapper around Facebook Pixel API

vue-analytics-facebook-pixel

Deprecated, use alternatives

A small wrapper around fbq. This package integrates Facebook pixel into your Vue app.

Installation

npm install vue-analytics-facebook-pixel

Also, this library requires installing Facebook Pixel API.

Usage

Preparations

import Vue from 'Vue'
import VueFacebookPixel from 'vue-analytics-facebook-pixel'

Vue.use(VueFacebookPixel)

Calling API

To start using this script you will have to call init(...) first.

/**
 * Init facebook tracking pixel
 * @param  {String} appId
 * @param  {object} [data={}]
 */
Vue.analytics.fbq.init('YOUR_FACEBOOK_CODE', {
  em: '[email protected]'
})

Make sure init(...) is called only once.

Then you will have full access to the event(...) method.

/**
 * Event tracking
 * @param  {String} name
 * @param  {object} [data={}]
 */
Vue.analytics.fbq.event('ViewContent', {
  content_name: 'Really Fast Running Shoes'
})

Inside component

All component instances can call this.$analytics.fbq

Naming convention

All vue-analytics-* share the same analytics object, where all the providers are stored.

Facebook script

Facebook Pixel API is required to be installed. You can skip the default window.fbq('init', 'KEY') part and use Vue.analytics.fbq.init(...) which will do the same.

vue-analytics-facebook-pixel's Issues

need to guide more detail...

I configured initial setup as README.md but it isn't working.
So I added code in below and it is working.

    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
    </script>

Consent, revoke + grant

Hey there,

Does this plugin work with the consent properties?

https://developers.facebook.com/docs/facebook-pixel/events-advanced-use-cases/v3.1

init method is not working

I tried the following

from the main:

• Vue.$analytics.fbq.init('AppID', {em: });
• Vue.analytics.fbq.init('AppID');

from the vue page:

• this.$analytics.fbq.init('AppID', {em: });
• this.$analytics.fbq.init('AppID');

But adding the script from Facebook Pixel initializes properly.
What's the right way of initializing through the analytics.fbq.init() method?

Cheers!

faq is not defined error

import Vue from "vue";
import VueFacebookPixel from 'vue-analytics-facebook-pixel';
Vue.use(VueFacebookPixel);
Vue.analytics.fbq.init(KEY, { em: EMAIL })

Developer console shows me error log.
How to solve this??

Decent, modern Facebook Pixel API loading

Has anyone rewritten this in a Vue-ish way?

function(f, b, e, v, n, t, s) {
  if (f.fbq) return;
  n = f.fbq = function() {
    n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
  };
  if (!f._fbq) f._fbq = n;
  n.push = n;
  n.loaded = !0;
  n.version = '2.0';
  n.queue = [];
  t = b.createElement(e);
  t.async = !0;
  t.src = v;
  s = b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t, s)
}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');

Maybe with vue-plugin-load-script and meaningful variable names?

enhancement request: integrate with vue-router

Similar to vue-analytics, allow passing a router instance as an option:

import router from './router'
import VueFacebookPixel from 'vue-analytics-facebook-pixel'

Vue.use(VueFacebookPixel, { router })

and automatically fire 'PageView' on route change