반응형
NuxtJs에서 Facebook 픽셀을 Import하는 방법
NuxtJs에서 Facebook Pixel 코드를 Import해야 합니다.
facebook에서 제공하는 콘텐츠를 사용하여 정적 저장소 pixel.js에 파일을 만들 수 있습니다.
!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')
fbq('init', 'XXYOUR CODEXX')
fbq('track', 'PageView')
(Nuxt에서는 javascrip 기반의 noscript 태그를 사용하지 않습니다.)
그런 다음 nuxt.conf.js 파일에 행을 추가합니다.
script:[
{src:'pixel.js', type: 'text/javascript'}
]
플러그인으로 Import할 수도 있습니다.
./plugins/sublic-sublic.blicts.
/* eslint-disable */
export default ({ app, store }) => {
/*
** Only run on client-side and only in production mode
*/
// if (process.env.NODE_ENV !== "production") return
/*
** Initialize Facebook Pixel Script
*/
if (process.browser) {
!(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'
);
fbq('init', 'XXXXXXXXX-XXXXX')
app.router.afterEach((to, from) => {
/*
** Fire a page view on each route change
*/
console.log("fire pageview", store.state)
fbq("track", "PageView")
})
}
}
nuxt.config.js의 플러그인 세션에서 Import합니다.
plugins: [
{ src: '~/plugins/facebook-events.js' }
]
를 삭제해 보겠습니다.<noscript>
태그를 붙입니다.
디버깅에 대해서는 https://stackoverflow.com/a/49202327/1483977 를 참조해 주세요.또한 버그에 대해서는 https://github.com/vuejs/vue/issues/9724 를 참조해 주세요.
i를 sr:false로 사용할 수 있습니다.
plugins : [
// ssr: false to only include it on client-side
{ src : '~/plugins/vue-notifications', ssr : false },
{ src : '~/plugins/vue-slider-component', ssr : false },
{ src : '~/plugins/network', ssr : false },
{ src : '~/plugins/web3js', ssr : false },
// {src: '~/plugins/irisws', ssr: false},
// { src : '~/plugins/iomqtt', ssr : false }
],
언급URL : https://stackoverflow.com/questions/43653545/how-to-import-facebook-pixel-on-nuxtjs
반응형
'programing' 카테고리의 다른 글
VueJ : 라우팅 혼선 (0) | 2022.07.16 |
---|---|
대신 wget을 통해 Linux에서 Java JDK를 다운로드하면 라이센스 페이지가 표시됩니다. (0) | 2022.07.16 |
Java와 Xamarin C#로 작성된 Android 앱의 성능을 어떻게 비교합니까?어쨌든 정량 데이터(코드 및 결과)를 확인한다. (0) | 2022.07.16 |
페이지에서 vue 라우터 숨기기 (0) | 2022.07.16 |
많은 채널 x86 시스템의 메모리 대역폭 (0) | 2022.07.16 |