All Projects → wemake-services → vue-analytics-facebook-pixel

wemake-services / vue-analytics-facebook-pixel

Licence: MIT license
A small wrapper around Facebook Pixel API

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-analytics-facebook-pixel

vue-toast
vue.js toast tips 提示文本 Vue1.0&2.0
Stars: ✭ 17 (-26.09%)
Mutual labels:  vue2
vue-insta-stories
Vue 2 & 3 library for Instagram like stories.
Stars: ✭ 45 (+95.65%)
Mutual labels:  vue2
vue2-element
基于vue2 + vue-router2 + element-ui + vuex2 + fetch + webpack2 企业级后台管理系统最佳实践
Stars: ✭ 115 (+400%)
Mutual labels:  vue2
vue-text-marquee
A Vue component to Marquee. Just used CSS3 animation.
Stars: ✭ 24 (+4.35%)
Mutual labels:  vue2
generator-vue-plugin
Yeoman generator generating vue plugin 🚀
Stars: ✭ 29 (+26.09%)
Mutual labels:  vue2
plugin-ceres
This is the official Ceres plugin developed by plentymarkets. Ceres is the default template plugin for plentymarkets 7 online stores.
Stars: ✭ 43 (+86.96%)
Mutual labels:  vue2
privera
Use the tools you know. Respect users' privacy. Forget cookie consents. Comply with GDPR, ePrivacy, COPPA, CalOPPA, PECR, PIPEDA, CASL; you name it.
Stars: ✭ 23 (+0%)
Mutual labels:  web-analytics
vue-ssr-template
A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.. (Thanks for vue-hackernews-2.0)
Stars: ✭ 18 (-21.74%)
Mutual labels:  vue2
vue-china-map
vue+vuex+axios+echarts画一个动态更新的中国地图
Stars: ✭ 64 (+178.26%)
Mutual labels:  vue2
vue-add-to-calendar
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X
Stars: ✭ 133 (+478.26%)
Mutual labels:  vue2
vue-input-autowidth
A Vue.js directive that automatically resizes an input's width to fit its contents.
Stars: ✭ 94 (+308.7%)
Mutual labels:  vue2
vue-tinymce-editor
This a component provides use of tinymce for vue developers
Stars: ✭ 221 (+860.87%)
Mutual labels:  vue2
trackingco.de
minimal and loginless web analytics
Stars: ✭ 32 (+39.13%)
Mutual labels:  web-analytics
vue-string-filter
✂️ Vue 2.x lightweight string manipulation filter
Stars: ✭ 38 (+65.22%)
Mutual labels:  vue2
vue-on-click-outside
vue mixin/directive that does something when you click outside a container
Stars: ✭ 32 (+39.13%)
Mutual labels:  vue2
vue-ray
Debug your Vue 2 & 3 code with Ray to fix problems faster
Stars: ✭ 48 (+108.7%)
Mutual labels:  vue2
vpin
基于 vue 的钉子组件,把你的内容固定到屏幕中📌。
Stars: ✭ 12 (-47.83%)
Mutual labels:  vue2
vue2-data-tree
A tree that data is lazy loaded. Support dragging node, checking node, editing node's name and selecting node.
Stars: ✭ 41 (+78.26%)
Mutual labels:  vue2
vue-collapse
A simple collapse component for Vue.js
Stars: ✭ 34 (+47.83%)
Mutual labels:  vue2
vue-drr
A Vue2 component for draggable, resizable, rotatable elements
Stars: ✭ 34 (+47.83%)
Mutual labels:  vue2

vue-analytics-facebook-pixel

Deprecated, use alternatives

npm

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].