search

shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.78k stars 315 forks source link

Get Facebook Pixel Work with next-pwa #329

Open aldoarya opened 2 years ago

aldoarya commented 2 years ago

Summary

We are using this library to use PWA in our web app. In the other hand, our team also use Facebook Browser Pixel to track events that our user do. When tested individually, both are working normally. But when doing end-to-end test and both tested together, the Facebook Browser Pixel isn't firing any event. We checked on Facebook Event Manager and Facebook Pixel Helper, both doesn't receive any event.

The event is actually fired and tracked in Hard Reload (Ctrl + F5) or first time user visit, but when we do normal reload or user revisit the page, the Facebok Pixel doesn't work again.

Investigating on Network tab on Developer Tools, I think that the service worker might be intercepting request to Facebook. We already tried to use NetworkOnly strategy for Facebook Pixel, but it's still not working.

How To Reproduce

Steps to reproduce the behavior:

  1. Install Facebook Pixel script on your web app
  2. Use this library to create PWA
  3. Run development server
  4. Open Localhost where your development server is started
  5. Do Hard Reload (Ctrl + F5). Notice that the event is triggered
  6. Do Normal Reload (F5). Notice that the event isn't triggered anymore.

Expected Behaviors

Facebook Pixel not intercepted by service worker and able to succesfully fire and track event.

Version

next-pwa: 5.2.24 next: 9.4.4

Screenshots

image (1)

next.config.js image

cache.js image Added this line beside the default cache.js

Puvvl commented 2 years ago

updated: AdBlock is blocking Facebook pixel work for me

lucerojulian commented 1 year ago

Hello, I have the same problem, but it is not due to ad-block.

Tofandel commented 1 year ago

It seems the tracking is working and the issue is with the Facebook Pixel Helper extension not detecting the events when the fetch is proxied through a service worker, the small problem is you can't force a request not to be proxied through the service worker if you want to debug with the facebook pixel helper image image

The only way as you've found is to do a forced page reload image image

But the tracking should still be working if proxied as NetworkOnly

Tofandel commented 1 year ago

I have found a workaround, the issue really comes from the facebook pixel helper extension not listening in on service workers, but you can enable Bypass for network which allows the extension to work.

Some adblockers also have the same issue and if you only allow it on the page they will still block the service worker's fetch, this workaround will work for that as well image