Skip to content

Commit

Permalink
Merge pull request #60 from WilliamDASILVA/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
WilliamDASILVA authored Feb 24, 2023
2 parents ab5c67c + ff3e5c9 commit ecc51b0
Show file tree
Hide file tree
Showing 8 changed files with 1,881 additions and 102 deletions.
42 changes: 0 additions & 42 deletions .circleci/config.yml

This file was deleted.

21 changes: 21 additions & 0 deletions .github/workflows/test.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
name: CI

on:
pull_request:

jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm test
20 changes: 19 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
# Change Log
# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [1.6.0](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/compare/v1.0.1...v1.6.0) (2021-12-23)


### Features

* add an option to enable/disable plugin when in dev mode ([#16](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/16)) ([fb05c9f](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/fb05c9f2804b86c527565a32cc4c42790048f789))
* add disable method ([#19](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/19)) ([50ce676](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/50ce676a203a801540cdbbe577b850448a4101de))
* add manual mode option ([#22](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/22)) ([0b81e54](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/0b81e542d52c8ef21a7f6b0f3446aca8b4c0537a))
* add router automatic PageView tracking ([#21](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/21)) ([9771c44](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/9771c445a35f4ced2e01dc1f035455439063ee9d))
* allow multiple pixel ids according to the route ([#23](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/23)) ([06a51b2](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/06a51b240bd1327bf16ac8542da1dd2ac3f0adca))
* create index.d.ts ([#13](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/13)) ([eb2c9cd](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/eb2c9cdbc885adcbe2b0f9c29b4b8cac4fd8eba3))


### Bug Fixes

* add missing method in typedef ([#24](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/24)) ([bf778f9](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/bf778f9da24f7b86f1bf4a44affcd6563ac7e358))
* include Fb plugin even not in debug mode ([#27](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/issues/27)) ([d03bfca](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module/commit/d03bfcab1fa3ee1c6f4c70b0c81b08cb33a2783b))

<a name="1.0.1"></a>
## 1.0.1 (2018-09-09)

Expand Down
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,17 @@ Per this example, whenever the user is on the `/my-custom-route`, it will use th

Note : Since the `pixels` property is an array of options, any other valid option (`track`, `manualMode`, ...) can be passed.

# Advanced Matching
To send custom user data when initializing the FB Pixel you'll have to disable the plugin in your Nuxt config file and enable it once you've set the user data.

Run the following from your Vue component once you've access to the user data:
```javascript
this.$fb.setUserData({ external_id: 32323, fn: 'John' })
this.$fb.enable()
```

Read more about [Advanced Matching](https://developers.facebook.com/docs/facebook-pixel/advanced/advanced-matching).

## Module options

List of possible options in the module:
Expand All @@ -148,7 +159,7 @@ List of possible options in the module:
| version | 2.0 | false | Tracking version. |
| disabled | false | false | Disable the Pixel by default when initialized. Can be enabled later through `$fb.enable()` and disabled again with `$fb.disable()`.
| debug | false | false | By default, tracking in development mode is disabled. By specifying `true`, you manually allow tracking in development mode.
| manualModef | false | false | By default, Facebook will trigger button click and page metadata. Set to `true` to disable this behaviour. [See more informations](https://developers.facebook.com/docs/facebook-pixel/advanced/#automatic-configuration)
| manualMode | false | false | By default, Facebook will trigger button click and page metadata. Set to `true` to disable this behaviour. [See more informations](https://developers.facebook.com/docs/facebook-pixel/advanced/#automatic-configuration)
| autoPageView | false | false | If set to `true`, automatically triggers a `PageView` track event on every page change.
| pixels | [] | false | An array of pixels be used according to a specific set of routes. See [Multiple pixel codes according to route](#multiple-pixel-codes-according-to-route)

Expand All @@ -161,6 +172,7 @@ The tracking pixel instance is available on all vue component instances as $fb.
| enable() | If you had previously set `disabled: true` in config, enables the pixel and tracks the current page view | $fb.init(), $fb.track() |
| disable() | Disables the pixel again | |
| setPixelId() | Change the default pixelId & trigger an init it | |
| setUserData(userData) | Used to set user data that'll be used once the `fbq` init function is called. See [Advanced Matching](https://developers.facebook.com/docs/facebook-pixel/advanced/advanced-matching). | |
| init() | Initialises the pixel | fbq('init', <options.pixelId>) |
| track(event, parameters) | Sends a track event with optional `parameters`. It's `PageView` by default if the `event` is not defined. | fbq('track', <options.track>, parameters) |
| query(key, value, parameters) | Call the underlying fbq instance with anything else. The `parameters` attribute is optional. | fbq(key, value, parameters) |
Expand Down
15 changes: 15 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,26 @@ interface FacebookEventParameters {
value?: number; // The value of a user performing this event to the business.
}

interface FacebookUserData {
em?: string // Email [email protected]
fn?: string // First name Lowercase letters
ln?: string // Last name Lowercase letters
ph?: number // Phone Digits only including country code and area code 16505554444
ID?: string | number // External external_id Any unique ID from the advertiser, such as loyalty membership ID, user ID, and external cookie
ge?: 'f' | 'm' // Gender Single lowercase letter, f or m, if unknown, leave blank
db?: number // Birthdate Digits only with birth year, month, then day 19910526 for May 26, 1991.
ct?: string // City Lowercase with any spaces removed
or?: string // State Province st Lowercase two - letter state or province code ca
or?: number // Zip Postal Code zp Digits only 94025
country?: string // Country Lowercase two - letter country code us
}

interface NuxtFacebookPixel {
enable(): void;
disable(): void;
init(): void;
setPixelId(pixelId: string): void;
setUserData(userData?: FacebookUserData): void;
track(event: null | FacebookEvent, parameters?: FacebookEventParameters): void;
query<T extends object>(key: string, value: string, parameters?: T): void;
}
Expand Down
102 changes: 81 additions & 21 deletions lib/templates/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,36 @@ import { Minimatch } from 'minimatch'
* @class Fb
*/
class Fb {
constructor (fbq, options) {
constructor (options) {
this.eventsQueue = []
this.fqbLoaded = false
this.options = options
this.fbq = fbq
this.fbq = null

this.isEnabled = !options.disabled
}

setFbq (fbq) {
this.fbq = fbq
this.fqbLoaded = true

this.send()
}

setPixelId (pixelId) {
this.options.pixelId = pixelId
this.init()
}

/**
* @method setUserData
* Used to set user data that'll be used once the `fbq` init function is called.
* @param {object} [userData] See https://developers.facebook.com/docs/facebook-pixel/advanced/advanced-matching#reference
*/
setUserData(userData) {
this.userData = userData
}

/**
* @method enable
*/
Expand All @@ -36,34 +54,64 @@ class Fb {
* @method init
*/
init () {
this.query('init', this.options.pixelId)
this.query('init', this.options.pixelId, this.userData || undefined)
}

/**
* @method track
*/
track (event = null, parameters = null) {
track (event = null, parameters = null, eventID = null) {
if (!event) {
event = this.options.track
}
if (!eventID) {
this.query('track', event, parameters)
} else {

this.query('track', event, parameters, eventID)
}


this.query('track', event, parameters)
}

/**
* @method query
* @param {string} cmd
* @param {object} option
* @param {object} parameters
* @param {object} eventID
*/
query (cmd, option, parameters = null) {
if (this.options.debug) log('Command:', cmd, 'Option:', option, 'Additional parameters:', parameters)
query (cmd, option, parameters = null, eventID = null) {
if (this.options.debug) log('Command:', cmd, 'Option:', option, 'Additional parameters:', parameters, "EventID:", eventID)
if (!this.isEnabled) return

if (!parameters) {
this.fbq(cmd, option)
} else {
this.fbq(cmd, option, parameters)
this.eventsQueue.push({
cmd,
option,
parameters,
eventID
})

this.send()
}

send () {
if (!this.fqbLoaded) {
return
}

while (this.eventsQueue.length) {
let event = this.eventsQueue.shift()

if (this.options.debug) log('Send event: ', event)

if (event.eventID) {
this.fbq(event.cmd, event.option, event.parameters, event.eventID)
} else if (event.parameters) {
this.fbq(event.cmd, event.option, event.parameters)
} else {
this.fbq(event.cmd, event.option)
}
}
}
}
Expand All @@ -84,7 +132,6 @@ function log (...messages) {
}

export default (ctx, inject) => {
let _fbq
const parsedOptions = <%= JSON.stringify(options) %>
const isDev = parsedOptions.dev && !parsedOptions.debug

Expand All @@ -95,6 +142,8 @@ export default (ctx, inject) => {

const pixelOptions = Object.assign({}, matchingPixel || parsedOptions)

const instance = new Fb(pixelOptions)

/* eslint-disable */
if (typeof window !== 'undefined') {
((f, b, e, v, n, t, s) => {
Expand All @@ -111,23 +160,34 @@ export default (ctx, inject) => {
s = b.getElementsByTagName('body')[0];
s.parentNode.appendChild(t, s);

_fbq = fbq;
let onLoadCallback = () => {
instance.setFbq(fbq)

if (!isDev && !pixelOptions.disabled) {
if (pixelOptions.manualMode) {
fbq('set', 'autoConfig', false, pixelOptions.pixelId)
}

if (!isDev && !pixelOptions.disabled) {
if (pixelOptions.manualMode) {
fbq('set', 'autoConfig', false, pixelOptions.pixelId)
fbq('init', pixelOptions.pixelId)
fbq('track', pixelOptions.track)
}
}

fbq('init', pixelOptions.pixelId)
fbq('track', pixelOptions.track)
if (t.readyState) {
t.onreadystatechange = function() {
if (t.readyState === "loaded" || t.readyState === "complete") {
t.onreadystatechange = null;
onLoadCallback();
}
}
}else {
t.onload = onLoadCallback
}
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
}
/* eslint-enable */

const instance = new Fb(_fbq, pixelOptions)

if (ctx.app && ctx.app.router) {
if (ctx.app && ctx.app.router) {
const router = ctx.app.router
router.afterEach(({ path }) => {
/**
Expand Down
Loading

0 comments on commit ecc51b0

Please sign in to comment.