➕ Use nuxt-facebook-pixel-module for fbq

likecoin · Nov 14, 2024 · 89a0865 · 89a0865
1 parent ef107b1
commit 89a0865
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 26 deletions.
diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml
@@ -31,6 +31,7 @@ jobs:
         env:
           GA_TRACKING_ID: ${{ vars.GA_TRACKING_ID }}
           AD_CONVERSION_ID: ${{ vars.AD_CONVERSION_ID }}
+          FACEBOOK_PIXEL_ID: ${{ vars.FACEBOOK_PIXEL_ID }}
           STRIPE_PUBLIC_KEY: ${{ vars.STRIPE_PUBLIC_KEY }}
           CRISP_WEBSITE_ID: ${{ vars.CRISP_WEBSITE_ID }}
           SENTRY_DSN: ${{ vars.SENTRY_DSN }}

diff --git a/functions/package-lock.json b/functions/package-lock.json
diff --git a/functions/package.json b/functions/package.json
@@ -63,6 +63,7 @@
     "magic-grid": "^3.2.4",
     "marked": "^5.1.2",
     "node-fetch": "^2.6.7",
+    "nuxt-facebook-pixel-module": "^1.6.0",
     "nuxt-start": "^2.17.2",
     "portal-vue": "^1.5.1",
     "querystring": "^0.2.1",

diff --git a/src/constant/index.js b/src/constant/index.js
@@ -2,6 +2,8 @@ export const { IS_TESTNET } = process.env;
 
 export const { AD_CONVERSION_ID } = process.env;
 
+export const { FACEBOOK_PIXEL_ID } = process.env;
+
 export const TEST_MODE =
   process.env.NODE_ENV !== 'production' || process.env.CI;
 

diff --git a/src/nuxt.config.js b/src/nuxt.config.js
@@ -13,6 +13,7 @@ const {
   GA_TRACKING_ID,
   AD_CONVERSION_ID,
   EXTERNAL_URL,
+  FACEBOOK_PIXEL_ID,
 } = process.env;
 
 const nuxtConfig = {
@@ -23,6 +24,7 @@ const nuxtConfig = {
     STRIPE_PUBLIC_KEY,
     GA_TRACKING_ID,
     AD_CONVERSION_ID,
+    FACEBOOK_PIXEL_ID,
     SITE_NAME,
     EXTERNAL_URL,
   },
@@ -86,7 +88,6 @@ const nuxtConfig = {
     ],
     link: [
       { rel: 'preconnect', href: 'https://storage.googleapis.com' },
-      { rel: 'preload', href: '/vendor/fbq.js', as: 'script' },
       {
         hid: 'stripe-js-link',
         rel: 'preload',
@@ -134,7 +135,6 @@ const nuxtConfig = {
       })),
     ],
     script: [
-      { src: '/vendor/fbq.js', type: 'text/javascript', async: true },
       {
         hid: 'stripe-js-script',
         src: 'https://js.stripe.com/v3',
@@ -330,6 +330,15 @@ const nuxtConfig = {
     '@nuxtjs/sentry',
     '@nuxtjs/sitemap',
     'portal-vue/nuxt',
+    [
+      'nuxt-facebook-pixel-module',
+      {
+        track: 'PageView',
+        pixelId: FACEBOOK_PIXEL_ID || '0',
+        autoPageView: true,
+        disabled: !FACEBOOK_PIXEL_ID,
+      },
+    ],
     // [
     //   '@likecoin/nuxt-google-optimize',
     //   {

diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -76,6 +76,7 @@
     "marked": "^5.1.2",
     "node-fetch": "^2.6.0",
     "nuxt": "^2.17.2",
+    "nuxt-facebook-pixel-module": "^1.6.0",
     "portal-vue": "^2.1.7",
     "postcss": "^8.4.14",
     "querystring": "^0.2.1",

diff --git a/src/static/vendor/fbq.js b/src/static/vendor/fbq.js
diff --git a/src/util/EventLogger.js b/src/util/EventLogger.js
@@ -1,4 +1,4 @@
-import { IS_TESTNET, AD_CONVERSION_ID } from '../constant';
+import { IS_TESTNET, AD_CONVERSION_ID, FACEBOOK_PIXEL_ID } from '../constant';
 
 function hexString(buffer) {
   const byteArray = new Uint8Array(buffer);
@@ -34,8 +34,8 @@ export function resetLoggerUser(vue) {
     vue.$gtag.set({ userId: null });
     vue.$gtag.set({ user_id: null });
   }
-  if (window.fbq && window.PIXEL_ID && !IS_TESTNET) {
-    window.fbq('init', window.PIXEL_ID);
+  if (vue.$fb && FACEBOOK_PIXEL_ID) {
+    vue.$fb.init(FACEBOOK_PIXEL_ID);
   }
   if (vue.$crisp) {
     vue.$crisp.push(['do', 'session:reset']);
@@ -70,8 +70,8 @@ export async function setLoggerUser(
         // vue.$gtag.config({ user_id: hashedId });
         vue.$gtag.set({ user_id: hashedId });
       }
-      if (window.fbq && window.PIXEL_ID && !IS_TESTNET) {
-        window.fbq('init', window.PIXEL_ID, {
+      if (vue.$fb && FACEBOOK_PIXEL_ID) {
+        vue.$fb.init(FACEBOOK_PIXEL_ID, {
           external_id: wallet,
         });
       }
@@ -101,8 +101,8 @@ export function updateLoggerUserInfo(
     if (vue.$gtag) {
       if (email) vue.$gtag.set('user_data', { email });
     }
-    if (window.fbq && window.PIXEL_ID && !IS_TESTNET) {
-      window.fbq('init', window.PIXEL_ID, {
+    if (vue.$fb && FACEBOOK_PIXEL_ID) {
+      vue.$fb.init(FACEBOOK_PIXEL_ID, {
         em: email,
         external_id: wallet,
       });
@@ -206,7 +206,7 @@ export function logPurchaseFlowEvent(
         });
       }
     }
-    if (window.fbq && !IS_TESTNET) {
+    if (vue.$fb && FACEBOOK_PIXEL_ID) {
       const eventNameMapping = {
         view_item: 'ViewContent',
         begin_checkout: 'InitiateCheckout',
@@ -217,8 +217,7 @@ export function logPurchaseFlowEvent(
       if (eventNameMapping[event]) {
         const eventName = eventNameMapping[event];
         const eventID = paymentId ? `${eventName}_${paymentId}` : undefined;
-        window.fbq(
-          'track',
+        vue.$fb.track(
           eventName,
           {
             currency,
@@ -299,8 +298,8 @@ export function logPurchaseNFTBookEvent(
         ],
       });
     }
-    if (window.fbq && !IS_TESTNET) {
-      window.fbq('trackCustom', 'PurchaseBook', {
+    if (vue.$fb && FACEBOOK_PIXEL_ID) {
+      vue.$fb.query('trackCustom', 'PurchaseBook', {
         currency,
         value: price,
         content_type: 'product',