Merge pull request #60 from WilliamDASILVA/dev

WilliamDASILVA · Feb 24, 2023 · ecc51b0 · ecc51b0
2 parents ab5c67c + ff3e5c9
commit ecc51b0
Show file tree

Hide file tree

Showing 8 changed files with 1,881 additions and 102 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -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
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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)
 

diff --git a/README.md b/README.md
@@ -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:
@@ -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)
 
@@ -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)                |

diff --git a/index.d.ts b/index.d.ts
@@ -41,11 +41,26 @@ interface FacebookEventParameters {
     value?: number; // The value of a user performing this event to the business.
 }
 
+interface FacebookUserData {
+  em?: string // Email jsmith@example.com
+  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;
 }

diff --git a/lib/templates/plugin.js b/lib/templates/plugin.js
@@ -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
    */
@@ -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)
+      }
     }
   }
 }
@@ -84,7 +132,6 @@ function log (...messages) {
 }
 
 export default (ctx, inject) => {
-  let _fbq
   const parsedOptions = <%= JSON.stringify(options) %>
   const isDev = parsedOptions.dev && !parsedOptions.debug
 
@@ -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) => {
@@ -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 }) => {
       /**