Welcome to the Instapage Support Center

|

Facebook Pixel conversion tracking for AMP

Note: Building AMP page experiences is available exclusively for our Enterprise subscribers. Click here to get in touch with our team for more details.

An AMP (Accelerated Mobile Page) is designed for campaigns targeted primarily at mobile users, which help you keep your visitors’ attention with loading times of under 1 second. AMP pages are generated differently compared to standard pages, which means the code used on them has to be adapted specifically for AMP. In this article, you can find the code you need to add to your AMP in order to track conversions inside your Facebook account.

NOTE: If you want to implement Facebook Pixel conversion tracking on an AMP, do not use our native Facebook Pixel integration at the same time. It is enough to use the code in this article. If you use both, the page views will be tracked twice.

Any of the codes below will need to be placed in HTML > Body. AMP validation will return errors if the codes are placed anywhere else.

1. Use the following code snippet for tracking only form submissions:

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

You will need to replace the underlined sections in the code by adding your Facebook Pixel ID on the "account" line and then customizing the “eventName” value to match your event name in Facebook.

2. Use the following code snippet for tracking only a button click (it works only for one specific button; if you want to track more than one button, the code needs to be edited to contain multiple “buttonClick” key - value pairs):

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

You will need to replace the underlined sections in the code by adding your Facebook Pixel ID on the "pixelID" line, adding the element ID of the button you want to track on the "selector" line, and then customizing the “eventName" value to match your event name in Facebook.

To get the element ID of a button, go to the preview mode or the live page and right click the button, select Inspect and copy the ID as shown in the gif below. The ID will be of the w-A-1 format.

ampbutton.gif

3. Use the following code for tracking a form submission and a button click at the same time:

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

You will need to replace the underlined sections in the code by adding your Facebook Pixel ID on the "pixelID" line, adding the element ID of the button you want to track on the "selector" line, and then customizing the “eventName” values to match your event names in Facebook.

Have more questions? Submit a request
Was this article helpful?
0 out of 0 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!