Dogstudio / highway

Highway - A Modern Javascript Transitions Manager
https://highway.js.org/
MIT License
1.43k stars 92 forks source link

Facebook Pixel Tracking #112

Closed bigskillet closed 2 years ago

bigskillet commented 2 years ago

Would it be possible for you to add an example for a Facebook Pixel code to the tracking documentation?

bigskillet commented 2 years ago

It looks like the Facebook Pixel Code works similar to Google Tag Manager, where it watches the History State. Can you confirm? I guess the documentation isn't necessary, as it does not require any customization.

ThaoD5 commented 2 years ago

Hello @bigskillet ; We don't have really the time to check the behavior of Facebook Pixel Code. Although, if you are able to test on your side and provide us the information of the working setup for you, we would appreciate if you could share so we could help other people :-) Otherwise, we'll have to have a look later on, sorry.

xSpylon commented 2 years ago

Google Analytics

Tracking the initial page load

When using Google Analytics, you can use the following snippet to track the initial page load. Simply paste the snippet in your site's footer, and replace GA_TRACKING_ID (on both locations) with your Google Analytics Tracking ID.

HTML

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

Tracking page-transitions

When it comes to page transitions, you can use the following snippet. Don't forget to replace GA_TRACKING_ID with your Google Analytics Tracking ID.

JavaScript

H.on('NAVIGATE_END', ({ to, location }) => {
  if (typeof gtag !== 'undefined') {
    gtag("config", "GA_TRACKING_ID", {
      page_path: location.pathname,
      page_title: to.page.title,
      page_location: location.href,
    });
  }
});

Facebook Pixel

Tracking the initial page load

Integrating FaceBook Pixel is quite similar to integrating Google Analytics. If you use the following snippet, you can simply replace FBP_TRACKING_ID (on both locations) with your Facebook Pixel Tracking ID.

HTML

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

Tracking page-transitions

To track page transitions with Facebook Pixel, use the following snippet.

JavaScript

H.on('NAVIGATE_END', ({ to, location }) => {
  if (typeof fbq !== 'undefined') 
    fbq('track', 'PageView');
  }
});