switch to Script component on the facebook pixel example (#29192)
## Documentation / Examples - [x] Make sure the linting passes
This commit is contained in:
parent
23ce41e2bc
commit
d105a2689e
3 changed files with 39 additions and 44 deletions
|
@ -1,25 +0,0 @@
|
|||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import * as fbq from '../lib/fpixel'
|
||||
|
||||
const handleRouteChange = () => {
|
||||
fbq.pageview()
|
||||
}
|
||||
|
||||
const FacebookPixel = ({ children }) => {
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
// This pageview only trigger first time (it is important for Pixel to have real information)
|
||||
fbq.pageview()
|
||||
|
||||
router.events.on('routeChangeComplete', handleRouteChange)
|
||||
return () => {
|
||||
router.events.off('routeChangeComplete', handleRouteChange)
|
||||
}
|
||||
}, [router.events])
|
||||
|
||||
return children
|
||||
}
|
||||
|
||||
export default FacebookPixel
|
|
@ -1,10 +1,46 @@
|
|||
import FacebookPixel from '../components/FacebookPixel'
|
||||
import { useEffect } from 'react'
|
||||
import Script from 'next/script'
|
||||
import { useRouter } from 'next/router'
|
||||
import * as fbq from '../lib/fpixel'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
// This pageview only triggers the first time (it's important for Pixel to have real information)
|
||||
fbq.pageview()
|
||||
|
||||
const handleRouteChange = () => {
|
||||
fbq.pageview()
|
||||
}
|
||||
|
||||
router.events.on('routeChangeComplete', handleRouteChange)
|
||||
return () => {
|
||||
router.events.off('routeChangeComplete', handleRouteChange)
|
||||
}
|
||||
}, [router.events])
|
||||
|
||||
return (
|
||||
<FacebookPixel>
|
||||
<>
|
||||
{/* Global Site Code Pixel - Facebook Pixel */}
|
||||
<Script
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
!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', ${fbq.FB_PIXEL_ID});
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<Component {...pageProps} />
|
||||
</FacebookPixel>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -6,22 +6,6 @@ export default class MyDocument extends Document {
|
|||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
{/* Global Site Code Pixel - Facebook Pixel */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
!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', ${FB_PIXEL_ID});
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<noscript>
|
||||
<img
|
||||
height="1"
|
||||
|
|
Loading…
Reference in a new issue