I am trying to implement Facebook Pixel on a WordPress site using Partytown. This is what I have done so far:
1 - I created a simple reverse proxy using PHP based on this repo:
$whitelist = 'http://localhost/mythemepath/~partytown/debug/partytown-ww-sw.js?v=0.7.6';
if (!isset($_SERVER['HTTP_REFERER'])) {
error_log('No HTTP_REFERER');
header('HTTP/1.0 403 Forbidden');
exit;
}
if ($_SERVER['HTTP_REFERER'] != $whitelist) {
error_log('Incorrect HTTP_REFERER: ' . $_SERVER['HTTP_REFERER']);
header('HTTP/1.0 403 Forbidden');
exit;
}
$url = $_GET['url'];
$url = filter_var($url, FILTER_SANITIZE_URL);
if (filter_var($url, FILTER_VALIDATE_URL) === false) {
error_log('Not a valid url: ' . $url);
echo "URL is not valid";
} else {
$urlcontent = file_get_contents($url);
if ($urlcontent !== false and !empty($urlcontent)) {
error_log('Success: ' . $url);
echo $urlcontent;
} else {
error_log('No content retrieved for url: ' . $url);
}
}
2 - I installed the partydown lib with npm and copied the lib files to: http://localhost/mythemepath/~partytown/
3 - I setup the configuration for Partytown on the header.php:
<script>
partytown = {
lib: '<?php echo get_template_directory_uri(); ?>/~partytown/',
debug: true,
resolveUrl: function (url, location, type) {
if (url.hostname === "connect.facebook.net" || url.hostname === "www.googletagmanager.com" || url.hostname === "www.google-analytics.com") {
var proxyUrl = new URL('http://localhost/proxy/');
proxyUrl.searchParams.append('url', url.href);
return proxyUrl;
}
return url;
},
forward: [
"fbq",
"dataLayer.push"
]
};
</script>
4 - I created the script that inserts partytown on the DOM:
import { partytownSnippet } from "../../../node_modules/@builder.io/partytown/integration";
const snippetText = partytownSnippet();
const el = document.createElement("script");
el.innerText = snippetText;
document.body.appendChild(el);
5 - And I call it on the header.php like this:
<script type="module">
<?php include "/partytown/dist/js/app.js"; ?>
</script>
6 - Still on the header.php, below both, I put the script for Facebook Pixel with the text/partytown type attritbute:
<script type="text/partytown">
!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', 'MYPIXELCODE');
fbq('track', 'PageView');
</script>
7 - When I visit the page, I get these messages on the console:

8 - And this is what the Meta Pixel Helper browser extension says:

I don't understand why the PageView event is not working. If I don't use the type text/partytown on the script for Facebook Pixel, the PageView works just fine.
Am I missing something to make Facebook Pixel work properly with Partytown?