use Facebook meta pixel with nextjs 14 app router

Unanswered

Citrine Wagtail posted this in #help-forum

Citrine WagtailOP

2024-04-20T14:16:24.670Z

I am trying to implement facebook meta pixel with nexjs 14 app router and i am not getting any response, like its not working, even if i use fbq in the console i am getting fbq undefined, also i am not seeing any response from the facebook, like i should be seeing this https://connect.facebook.net/en_US/fbevents.js
if the meta pixel is working fine, but i am not getting this either
so if you guys can help me out, if i am using it wrongly please help me with it

13 Replies

Citrine WagtailOP

2024-04-20T14:16:35.120Z

 <Head>
        <Script
          id="facebook-pixel"
          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', 'pixel_code');
        fbq('track', 'PageView');
      `,
          }}
        />
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: "none" }}
            src={`https://www.facebook.com/tr?id=pixel_code&ev=PageView&noscript=1`}
          />
        </noscript>
      </Head>

here is the head

ofthe layout

i also have one layout in the (root) but it doesn't have any html and body tags that just a simple layout

@Citrine Wagtail <Head> <Script id="facebook-pixel" 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', 'pixel_code'); fbq('track', 'PageView'); `, }} /> <noscript> <img height="1" width="1" style={{ display: "none" }} src={`https://www.facebook.com/tr?id=pixel_code&ev=PageView&noscript=1`} /> </noscript> </Head>

joulev

2024-04-20T14:28:19.131Z

<Head> doesn’t work in the app router. Simply remove the use of it

@joulev <Head> doesn’t work in the app router. Simply remove the use of it

Citrine WagtailOP

2024-04-20T14:30:32.421Z

then how should i simply use <head> ?

cause facebook recommends to use the meta pixel inside the head