As a publisher, integrating your site with Permutive is simple. We'll provide you with a JavaScript tag to include on your pages, and you can further configure the tag to pick up details about your content. 

Note: if you are already in contact with our Customer Success team, and have been provided with a script - please follow this support document instead.

You can get started with our default configuration for publishers. With this set-up, basic events such as Pageview and PageviewEngagement will be tracked automatically - enabling you to immediately start sending data about your users and their interests into Permutive.

Let's start by getting Permutive up and running on your article pages. Here's the code:

<script>
!function(e,n,t,r,o,i){if(!n){n=n||{},window.permutive=n,n.q=[],n.config=i||{},n.config.projectId=r,n.config.apiKey=o,n.config.environment=n.config.environment||"production";for(var c=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user"],a=0;a<c.length;a++){var s=c[a];n[s]=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);n.q.push({functionName:e,arguments:t})}}(s)}var p=window.Worker?"async":"blocking",g=e.createElement("script");g.type="text/javascript",g.async=!0;var m=("https:"==e.location.protocol?"https://":"http://")+"cdn.permutive.com";g.src=m+"/"+r+"-"+p+".js";var u=e.getElementsByTagName(t)[0];u.parentNode.insertBefore(g,u)}}(document,window.permutive,"script","<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>

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. 

Next, you'll need to ensure that your article properties are passed into our script. Using our script above, the article's title, description, url, section and categories will be sent into Permutive. You are free to change these properties as you wish, however this is our recommended structure for publishers (examples of extra properties some publishers choose to send into Permutive are available here). Note that all properties in the page  object will be included in your Pageview  and PageviewEngagement  events.

You may need to get someone technical involved to figure out the best way to pass these properties in. However, often these properties can easily be extracted from the page. For example, many publisher websites follow the open graph protocol - enabling you to extract details such as the article title with a single line of javascript:

document.head.querySelector("[property='og:title']").content

For other pages on your website, such as your homepage and category pages, you can use a simplified script which simply omits the page properties:

<script>
!function(e,n,t,r,o,i){if(!n){n=n||{},window.permutive=n,n.q=[],n.config=i||{},n.config.projectId=r,n.config.apiKey=o,n.config.environment=n.config.environment||"production";for(var c=["addon","identify","track","trigger","query","segment","segments","ready","on","once","user"],a=0;a<c.length;a++){var s=c[a];n[s]=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);n.q.push({functionName:e,arguments:t})}}(s)}var p=window.Worker?"async":"blocking",g=e.createElement("script");g.type="text/javascript",g.async=!0;var m=("https:"==e.location.protocol?"https://":"http://")+"cdn.permutive.com";g.src=m+"/"+r+"-"+p+".js";var u=e.getElementsByTagName(t)[0];u.parentNode.insertBefore(g,u)}}(document,window.permutive,"script","<PROJECT_ID>","<API_KEY>",{});
permutive.addon("web", {});
</script>

When you're ready to go, the script should be placed in between your pages' <head> </head> tags. We recommend our customers deploy Permutive early on the page, i.e. above other scripts in the <head> section where possible. This helps ensure Permutive loads as quickly as possible and updates targeting information on the page before ad calls are made. We recommend against loading our tag via tag managers, such as GTM, as doing this can cause significant delays and prevent Permutive from loading quickly. Note that our script loads asynchronously, so should not have a negative effect on page load.

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?