Integrating Permutive with your Facebook instant articles is simple and takes just a few minutes of development time. To get set-up, you just need to copy and paste a couple of scripts into your instant articles feed.

First, you'll need to paste our core script into your op-tracker  figure. This loads our optimised script for Facebook instant articles, and enables us to track ArticlePageview  and PageviewEngagement  events in the same way as we do in our standard web integration.

Here's the code:

<script>
  !function(n,e,o,r,i){if(!e){e=e||{},window.permutive=e,e.q=[],e.config=i||{},e.config.projectId=o,e.config.apiKey=r,e.config.environment=e.config.environment||"production";for(var t=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user","consent"],c=0;c<t.length;c++){var f=t[c];e[f]=function(n){return function(){var o=Array.prototype.slice.call(arguments,0);e.q.push({functionName:n,arguments:o})}}(f)}}}(document,window.permutive,"<PROJECT_ID>","<API_KEY>",{});
permutive.addon("web", {
  page: {
    article: {
      id:          "<ARTICLE_ID>",
      title:       "<ARTICLE_TITLE>",
      description: "<ARTICLE_DESCRIPTION>",
      url:         "<ARTICLE_URL>",
      section:     "<ARTICLE_SECTION>",
      categories:  ["<CATEGORY1>","<CATEGORY2>"]
    }
  }
});
</script>
<script async src="https://cdn.permutive.com/<PROJECT_ID>-fia.js"></script>


The first change you'll need to make here is to replace <PROJECT_ID> and <API_KEY> with your Permutive project ID and API key. 

You'll then need to ensure that your article properties are passed into our script. You are free to change these properties as you wish, however this is our recommended structure for publishers. 

Next, you'll need to update your op-ad figures in all cases where you wish to use Permutive segments for targeting. This code change enables you to pass your users' Permutive segments to your ad-server on ad requests. Many publishers are using DFP to serve ads within their Facebook instant articles, so our code example here is for DFP op-ad figures:

<script>
  window.googletag = window.googletag || {};
  window.googletag.cmd = window.googletag.cmd || [];

  googletag.cmd.push(function() {
    if (googletag.pubads().getTargeting('permutive').length == 0) {
      var kvs = localStorage.getItem('_pdfps');
      googletag.pubads().setTargeting('permutive', kvs ? JSON.parse(kvs) : []);
    }
  });
</script>

If you want to use Permutive segments in op-ad figures which make calls to a different ad-server, get in touch and we will work with you to build out an integration.

Once you've made the code changes, just let us know and we will check the integration and ensure that data is coming in as expected. 

This article assumes that a Permutive project has been configured for you and that you've already been sent your Permutive project ID and API key. If this is not the case, then please get in touch!

Did this answer your question?