From 89a08653c47cb68379a8f2b7c5865ac87500b91e Mon Sep 17 00:00:00 2001 From: William Chong Date: Thu, 14 Nov 2024 03:11:40 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Use=20nuxt-facebook-pixel-module=20?= =?UTF-8?q?for=20fbq?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/deploy-main.yml | 1 + functions/package-lock.json | 9 +++++++++ functions/package.json | 1 + src/constant/index.js | 2 ++ src/nuxt.config.js | 13 +++++++++++-- src/package-lock.json | 11 ++++++++++- src/package.json | 1 + src/static/vendor/fbq.js | 11 ----------- src/util/EventLogger.js | 23 +++++++++++------------ 9 files changed, 46 insertions(+), 26 deletions(-) delete mode 100644 src/static/vendor/fbq.js diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml index 82c0a9b48..93f172793 100644 --- 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 index 2928fb466..500b43a3f 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -56,6 +56,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", @@ -17015,6 +17016,14 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/nuxt-facebook-pixel-module": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/nuxt-facebook-pixel-module/-/nuxt-facebook-pixel-module-1.6.0.tgz", + "integrity": "sha512-+9JGTzf6aXp5sIAsW/oPSP/HTZR0a+2FpFHYGFjvOrwp81mx7i10mt3C1XPcHakUH48kHEQSkB8PH4MD7SPLvQ==", + "dependencies": { + "minimatch": "^3.0.4" + } + }, "node_modules/nuxt-start": { "version": "2.17.2", "resolved": "https://registry.npmjs.org/nuxt-start/-/nuxt-start-2.17.2.tgz", diff --git a/functions/package.json b/functions/package.json index f69474ed4..112293fce 100644 --- 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 index 7eaeb98d0..af33d0c67 100644 --- 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 index 4457e46c5..22bca1a1b 100644 --- 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 index 613b0d949..cd3038469 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -56,6 +56,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", @@ -67,7 +68,7 @@ "tiny-cookie": "^1.0.1", "url-parse": "^1.4.7", "uuid": "^8.3.2", - "v-dropdown-menu": "https://github.com/likecoin/v-dropdown-menu.git#9ab8dd0320125c105ae99df096ed3fcb477fe0e0", + "v-dropdown-menu": "git+ssh://git@github.com:likecoin/v-dropdown-menu.git#9ab8dd0320125c105ae99df096ed3fcb477fe0e0", "v-tooltip": "^2.0.2", "vue": "^2.6.14", "vue-awesome-swiper": "^4.1.1", @@ -35784,6 +35785,14 @@ "nuxt": "bin/nuxt.js" } }, + "node_modules/nuxt-facebook-pixel-module": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/nuxt-facebook-pixel-module/-/nuxt-facebook-pixel-module-1.6.0.tgz", + "integrity": "sha512-+9JGTzf6aXp5sIAsW/oPSP/HTZR0a+2FpFHYGFjvOrwp81mx7i10mt3C1XPcHakUH48kHEQSkB8PH4MD7SPLvQ==", + "dependencies": { + "minimatch": "^3.0.4" + } + }, "node_modules/nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", diff --git a/src/package.json b/src/package.json index 911c4b30f..3b0754941 100644 --- 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 deleted file mode 100644 index 683702f82..000000000 --- a/src/static/vendor/fbq.js +++ /dev/null @@ -1,11 +0,0 @@ -!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'); -window.PIXEL_ID = '1013529535523534'; -fbq('init', window.PIXEL_ID); -fbq('track', 'PageView'); diff --git a/src/util/EventLogger.js b/src/util/EventLogger.js index ea2d7c0f0..2d64832fa 100644 --- 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',