Meta Pixel Implementation for Single Page Applications

Single Page Applications (SPA) does not require a page to be reloaded when the URL changes therefore a different approach to event tracking with the Meta Pixel has to be followed.


  • The Pixel's base code must already be installed on the webpage where you will be tracking events.

Note: You can set disablePushState to true to stop sending PageView events on history state changes but it is not recommended.

Track a an Action

Track a specific area where an action it taking place using the History State API. There is no one one-size fits all solution to this as it highly depends on the framework and the implementation details. The general idea is to track the event whenever there is a URL change in the SPA. Hooking it into the routing system of the framework or application is required.

Example Code

  <ul id="menu" class="clearfix">
    <li><a href="link1">Link 1</a></li>  //Link to ViewContent
    <li><a href="link2">Link 2</a></li>  //Link to AddPaymentInfo
    <li><a href="link3">Link 3</a></li>  //Link to CompleteRegistration
  <script type="text/javascript" src=""></script> 
    (function($) {
      var loadContent = function(href) {     // Simulates an AJAX call to the server to grab new content
        $.ajax(href + ".html", {
          success: function(data) {
            history.pushState({ 'url': href }, 'New URL: ' + href, href);     // Called to the the URL on link click
            $('#content').html(data + new Date());

            var eventname = null;   //Optional Section - Demonstrates that additional 
            switch (href) {         // events can be tracked on particular path changes
              case 'link1':
                eventname = 'ViewContent';
              case 'link2':
                eventname = 'AddPaymentInfo';
              case 'link3':
                eventname = 'CompleteRegistration';

            fbq('track', eventname)   //Tracking event function is called
          error: function() {
            console.log('An error occurred');

      var init = function() {
        $('#menu a').click(function(e) {

      $(document).ready(function() {

Learn More