How to set up Facebook Pixel? | Swipe Pages Help Center

Please use this article to see how to add Facebook Pixel to your landing pages. Once pixel is setup as discussed in the article earlier, page views are tracked automatically for you, so a really easy way to track other conversions like form submissions is to add the pixel to a Thank you page and redirect your visitors to it after form submission.

However, if you want to track other Standard events provided by Facebook, it's certainly possible with SwipePages.

For standard Pages

After adding the pixel Id as mentioned earlier, follow the instructions below to set up your desired event tracking. Please add the javascript below in the Header tab under the Additional Javascript area inside the builder.

Track Conversions triggered by Button Clicks

window.addEventListener('DOMContentLoaded', function () {
  var ele = document.getElementById("custom-button");
  ele.addEventListener("click", function() {
   fbq('track', 'Lead');
  })
});

Track Conversions triggered by Form Submit

window.addEventListener('DOMContentLoaded', function () {
  var forms = document.querySelectorAll(".tatsu-form");
  forms.forEach(function(form) {
        form.addEventListener("submit", function() {
            fbq('track', 'Lead');
        });
   });
});

In the code snippets above, fbq('track' , 'Lead') is an example, but you can choose to replace it with any predefined Facebook events here https://www.facebook.com/business/help/402791146561655?id=1205376682832142

For AMP Pages

If you want to track additional events in AMP pages, please remove the pixel ID from the Facebook pixel Id area in the page settings. Please add the snippet below in the Body Start tab under "Other Codes" area.

Track Conversions triggered by Button Clicks

<amp-analytics type="facebookpixel" id="facebook-pixel">
<script type="application/json">
{
   "vars":{
      "pixelId":"1234567891313"
   },
   "triggers":{
      "trackPageview":{
         "on":"visible",
         "request":"pageview"
      },
      "buttonClick":{
         "selector":"#custom-button",
         "on":"click",
         "request":"event",
         "vars":{
            "eventName":"Add your event name here"
         }
      }
   }
}
</script>
</amp-analytics>

Track Conversions triggered by Form Submit

<amp-analytics type="facebookpixel" id="facebook-pixel">
<script type="application/json">
{
   "vars":{
      "pixelId":"1234567891313"
   },
   "triggers":{
      "trackPageview":{
         "on":"visible",
         "request":"pageview"
      },
      "formSubmit":{
         "on":"amp-form-submit-success",
         "request":"event",
         "vars":{
            "eventName":"Add your event name here"
         }
      },
      "buttonClick":{
         "selector":"#custom-button",
         "on":"click",
         "request":"event",
         "vars":{
            "eventName":"Add your event name here"
         }
      }
   }
}
</script>
</amp-analytics>

Please replace 1234567891313 with your pixel Id. You can add the identifier custom-button for the Button ( or any other module ) by Selecting the Button - Advanced Tab - Identifier - CSS ID

Please note we have only mentioned the common use cases where you would set up Tracking Code with Pixel. For more use case and vendor support in AMP pages, please take a look this example at Github.