How to make PageView event from Facebook Pixel work properly with Partytown?

480 Views Asked by At

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: messages from partytown on the console

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

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?

0

There are 0 best solutions below