How to Track Pageviews with Facebook Pixel in Single Page Applications

Updated: April 6th, 2020. Here’s a situation that might look familiar to you. You land on your site and a Facebook Pixel tag fires. You continue browsing the site and the pixel never fires again (unless you hit the Refresh button in your browser).

What you’re dealing here with is called a Single Page Application and web tracking tools (including GTM) don’t behave as you would expect.

In this guide, I’ll show you how to track page views with Facebook Pixel in Single Page Applications/websites.

What is a Single Page App (SPA) / Website?

According to Google, a Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically (and the page technically does not reload, even though it might look differently).

The usual Facebook Pixel tracking works well with traditional websites because the snippet code is run every single time users load a new page.

However, in the single-page website/app, all of the necessary code is loaded once and the page does not reload during the entire user session. When you continue browsing your site or web app, the content is loaded dynamically. That is why your Facebook Pixel pageview fires only once. The URLs might change but that is just to give the perception of separate pages.

Luckily, everything is possible and you can track such pageviews with GTM as well. Continue reading and I’ll show you how.

Requirements

To get the most out of this guide, you should be already familiar with how to track Single Page Applications in general.

As for Facebook Pixel, I highly recommend that you use the Custom FB Pixel template for GTM (as described here). If you have implemented the Facebook Pixel via Custom HTML tag, make sure that the following things set up:

You have split the main FB pixel code into two parts and saved it as two separate tags:

• FB Pixel Base code (without the fbq(‘track’, ‘PageView’);). Set this tag to fire once per page. Don’t add any trigger to it. Save it. You can also remove everything related to <noscript> (it will not work anyway).
  
• Facebook Pixel pageview command surrounded by <script> tags. Set this tag to fire on All Pages. And in the Tag Sequencing section, make sure that the Facebook Pixel base tag is set as the Setup Tag.
  

Remember: the aforementioned two steps are required if you are using FB pixel via Custom HTML tag. If you have implemented the FB Pixel Custom Templates, you don’t need any additional configuration.

The tag

After you have read the Important section of this blog post, you should already have either:

• One Pageview tag (implemented via a Custom template)
• Or two Custom HTML tags, Base code, and Pageview command

To track the rest of the pageviews (a.k.a. Virtual Pageviews) we will be using the same tag(s).

The Trigger

Currently, your Facebook Pixel fires only on the Page View event in the Preview mode. That’s because you are using the All Pages trigger.

In Single Page Applications, we also need to have another trigger to track when the page URL has dynamically changed. Every time this happens, we’ll fire the Facebook Pixel Pageview once again.

I have a very extensive guide that explains how to decide which trigger to choose for your setup (because there are many nuances). So, if you haven’t yet, I highly recommend doing that.

Long story short, you have two main options:

• History Change trigger
• If that does not work, you should go with developer’s help & Custom Event Trigger

Let’s imagine that for me, a History Change trigger works.

Create a trigger that fires on all History Change events.

Save the trigger, enable the GTM preview mode, refresh your website and try navigating from page to page. You should see the History events every time you go to another page. If you see multiple History events on every page view, read this.

If you don’t see any History events in the preview mode, you will need to cooperate with a developer after all.

Add the Trigger to your tag

Add the trigger you have created in the previous chapter to your Facebook Pixel tag.

If you are using a Facebook Pixel Custom Template, just add the trigger to your Pageview tag. If you are using the Custom HTML tag, set the trigger to the tag that contains just the fbq(‘track’, ‘PageView’); command.

Make sure you are not firing the FB Base code multiple times on the same page (that will cause errors).

Every time a Facebook Pixel PageView is tracked, it will capture that current URL of the page (even if it contains # (URL Fragment)). So, you don’t need to do any additional configurations (unlike with the Google Analytics).

Let’s test

Now, it’s time to make sure that you have implemented everything correctly.

GTM Preview and Debug mode. In GTM, enable the Preview and Debug mode, then refresh the page where you want to install Facebook Pixel with Google Tag Manager.

At the bottom of the screen, a debug console will appear. Click the Pageview event and you should see that your Facebook Pixel tag has fired.

Then continue browsing your site. Depending on your setup, you will see History or something like virtualPageview events in the Preview mode. Click them, check whether your FB Pixel pageview tag is firing.

Facebook Pixel Helper. The previous tip does not mean that everything was sent to Facebook Pixel properly! There are other places we need to check. One of them is Facebook Pixel helper. Install it and you will see this icon appear in the top right corner of your Chrome browser. Once you refresh the page AND if Facebook Pixel is implemented on a page, its color will change to blue and you will see a number within that icon.

Click that icon and let’s check. We see that a PageView was tracked and there is a green checkmark icon next to it. That’s good! If there was a loader or yellow icon, that’d mean a possible problem. But a green icon is exactly what we are looking for.

If you have multiple pageviews tracked on the same page, you will see all of them as separate PageView events in the FB Pixel Helper.

Facebook Pixel Reports

In Facebook Business Manager, go to Events Manager > Data Sources > Select your Pixel and then Test Events.

Enter the URL of your website (if I was working with my site, I would enter https://www.analyticsmania.com) and click Open Website. After you are redirected to your own website, go back to the Test Events of your Pixel and check whether you see Pageviews coming from your own device. If nothing appears, go back to your site and refresh the page once again.

If everything is fine, this means that you have implemented Facebook Pixel in a Single Page Application correctly.

Learn more about how to implement Facebook Pixel with GTM

If you want to learn even more cool stuff about Facebook Pixel + GTM and make sure that everything is set up properly, enter your email address below and download my Facebook Pixel Cheat Sheet for Google Tag Manager.

Track page views with Facebook Pixel in single-page applications/websites: Final Words

In this fairly quick guide, you have learned what necessary steps do you need to do in order to start tracking all page views that occur in your single-page application/website.

For that, you need to fire your FB Pixel Pageview tag not only on the initial pageview (All Pages trigger) but also on subsequent virtual pageviews. Custom Event trigger or History Change trigger are great for that task.

If you have ever worked with single-page application tracking in Google Analytics, you are probably aware of the # (URL fragment) problem. Luckily, Facebook Pixel automatically tracks the # of the URL too, so you don’t need to do any additional configurations here.