Facebookpixel ViewContent in AMP Pages

925 Views Asked by At

I want to add the Facebook Pixels PagesView and ViewContent in my Amp Page.

Here is my Code:

<amp-analytics type="facebookpixel" id="facebook-pixel">
  <script type="application/json">
    {
      "vars": {
      "pixelId": "xy"
     },
     "triggers": {
       "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackViewContent": {
         "on": "visible",
         "request": "eventViewContent",
         "extraUrlParams": {
           "content_category": "open article"
         }
        }
      }
    }
  </script>
</amp-analytics>

The Pageview works but for the ViewContent I always get warnings in the Facebook Pixel Helper. The resulting POST request to Facebook from AMP is this: https://www.facebook.com/tr?noscript=1&ev=ViewContent&id=xy&cd%5Bvalue%5D=&cd%5Bcurrency%5D=&cd%5Bcontent_name%5D=open%20article&cd%5Bcontent_type%5D=&cd%5Bcontent_ids%5D=&dt=o4haxxaf7ij6ugv6b3p7cy2qybh9e8rd

So it is sending all sorts of empty parameters to FB. Most of the standard event parameters for Facebook pixel are optional. I don't want that they send all the parameters. I just want to send the content_category..

3

There are 3 best solutions below

1
On

Use following config:

<amp-analytics type="facebookpixel" id="facebook-pixel">
  <script type="application/json">
  {
    "vars": {
      "pixelId": "PIXEL_ID"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackViewContent": {
        "on": "visible",
        "request": "eventViewContent",
        "vars": {
          "product_catalog_id": "category_id",
          "currency": "EUR",
          "content_name": "content_name",
          "content_category": "content_category",
          "content_type": "product",
          "content_ids": "[1,2,3]",
          "value": "10"
        }
      }
    }
  }
  </script>
</amp-analytics>
0
On

Use img pixel. Example:

<amp-pixel src="https://www.facebook.com/tr?id=&ev=ViewContent&noscript=1"
    layout="nodisplay"></amp-pixel>
0
On

Build the code as if you were creating a custom event, like below. Except for the param content_name, all the others will be hidden:

"MyLateAnswer": {
  "on": "visible",
  "selector": "html",
  "request": "event",
  "vars": {
    "eventName": "ViewContent",
    "content_name": "sorry_mandatory_param_to_all_events"      
  },
  "extraUrlParams": {
    "content_category": "open article"
  }            
},