Add Meta Pixel Tracking for AddToWishlist in Next.js App Router

Intro

I’m working for a client who I already implemented Meta Pixel tracking for PageView in their Next.js app. On the coding side, it’s basically as simple adding: import Script from "next/script"; and pasting in the code given from the Meta Events Manager:

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

Adding ‘AddToWishlist’ Incorrectly

But now they needed the event AddToWishlist added to the page /startyourpuzzle for more tracking. I was given this code: fbq('track', 'AddToWishlist');, and just told to add it to /startyourpuzzle. As I only implemented Meta Pixel in /layout, that’s where I added it.

But I ran into an issue. It was firing off on load on every page since the layout file is being called on every page. Here is the code in /layout:

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

I ran through multiple different options such as using usePathname() in the layout to render different meta pixel code on /startyourpuzzle. In the end, the closest answer I could get was copying over the code from /layout to /startyourpuzzle and replacing PageView with AddToWishlist since PageView was already being tracked:

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

It stopped running on every page but would fire off AddToWishlist on refresh of /startyourpuzzle. I tried looking through multiple docs for any example for AddToWishlist in Next.js with no luck.

Adding ‘AddToWishlist’ Correctly

After a ton of research, I landed on this:

<Script id="metaPixel">
  {`
    !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', '{Your-ID}');
    fbq('trackSingle', 'AddToWishlist');
  `}
</Script>

I removed the img tag. It can’t handle dynamic requests and it was one of the reasons it was firing off on refresh. I also changed track to trackSingle. This was because, “When the init function is called against a Pixel ID, it stores it in a global queue structure where any subsequent call to track or trackCustom is fired for any Pixel that was previously initialized.” So the Pixel code in /layout would trigger AddToWishlist on refresh since it gets called on every page. To handle multiple events, trackSingle makes sure that even if another Pixel function was called, AddToWishlist would only fire off if the specific needs were met.

After all this, I checked my work using the chrome plugin, Meta Pixel Helper, since I didn’t have access to the client’s Meta Events Manager. The plugin showed that the AddToWishlist event was there but that it wasn’t firing due to either error or that it only fires on a ‘dynamic event’ such as a button click. I, correctly, assumed that the ‘dynamic event’ that this needs is anything that pertains to ‘add payment info events’ which requires a specific dynamic event. As I don’t have access to the events manager and was only given this code, fbq('track', 'AddToWishlist'); to add, I believed that what I did was the best course of action.

After a couple of hours waiting to hear back from the client to check the Events Manager, I received confirmation that the event was firing off correctly!

Conclusion

I think if I had access to their FaceBook Event Manager, it would’ve sped this up a decent bit but I worked with what I had. I was a bit annoyed at the lack of documentation or examples for this. The docs only having things like, “dynamic events such as a button click” but no list anywhere about what the dynamic events were, is poor documentation. I had to infer and piece a lot of stuff together to get this to work. All that aside, I learned a good bit about Meta Pixel from diving into fixing this.