In this article

We outline how to verify the Permutive SDK on Web Deployments. This includes validating the SDK, Consent Framework, events, schema, and ad requests.

Prerequisites

Schema for the Pageview and custom events
Permutive Dashboard access

Validating Consent

Note: applicable to GDPR/UK countries & CCPA

Important: Requires a clean browser state. Close all private windows and open a new one.

Open a private browsing window.
Open Developer Tools before navigating to the site.
Type in the URL. You should see Permutive loading
e.g. DevTools > Network tab > filter by "permutive" and select All.

Consent Validation 1: You should see Permutive JS SDK downloading.
Consent Validation 2: No event or XHR request should be sent to Permutive until you accept cookies.

Proceed to accept cookies.
- Consent Validation 3:
Directly after the click, you should see a Pageview event appear without reloading the page.
If all of the above functions as described, consent is correctly implemented.

Partial or Broken Consent Management Cases:

Partial: Permutive JS is not loaded before consent - This means the Permutive SDK consent system is not being used. The biggest issue with not using the Permutive Consent Framework is the full SDK will need to be loaded upon consent, slowing down segmentation and missing targeting opportunities for first Pageview users.
Partial: Permutive doesn't load when consent is granted - Permutive is only loaded when the page is reloaded after consent is granted. Although the system is working, it is missing the opportunity to have Permutive tracking and targeting on the first Pageview.
Broken: Permutive event requests are fired before consent is given.
Broken: Permutive is never loading.

Verifying Permutive Code

Verify the Permutive IDs and Key.

Access the dashboard and retrieve <ORGANIZATION_ID>, <WORKSPACE_ID> and <WORKSPACE_API_KEY>(public).

Once on the site:

Open Chrome Dev Tools
Navigate to the network tab. Filter by "Permutive."

You should be able able to find the IDs and key in the following requests:

If you are working with an enterprise workspace, it should use the correct <ORGANIZATION_ID> <WORKSPACE_ID>: https://**<ORGANIZATION_ID>**.edge.permutive.app/**<WORKSPACE_ID>**-web.js . If NOT an enterprise workspace, both the Workspace and the Organization IDs should be the same.

Verify Permutive is Loaded as Soon as Possible.

In order for Permutive to have targeting ready for when the ad manager (eg: GAM) requests the ad, Permutive has to load it before the ad manager.

Once on site:

Open Chrome Dev Tools
Navigate to Sources.
Open a global search (⌘ command + ⌥ option + f)
search permutive.addon or .addon. You will now find the SDK loading script. See below.

The main tag should be placed in between the <head></head> tags to ensure Permutive loads as soon as possible. If this is not the case (i.e. the header can’t be modified), please ensure Permutive is loading before the GAM network call:

Checking Order of Calls to Permutive

Once on site:

Open Chrome Dev Tools
Navigate to Sources.
Open a global search (⌘ command + ⌥ option + f)
search permutive.addon or .addon. You will now find the SDK loading script. See below.

Check if the code has all of the following steps.


<script>
  // Check 1: Permutive Initialisation code is first
  !function(e,o,n,i)){}(window.permutive,"<WORKSPACE_API_KEY>","<WORKSPACE_ID>",{});
  
  // Check 2: Permutive GAM connector is second
  window.googletag=window.googletag||{},window.googletag.cmd=window.googletag.cmd||[],window.googletag.cmd.push(function(){if(0===window.googletag.pubads().getTargeting("permutive").length){var e=window.localStorage.getItem("_pdfps");window.googletag.pubads().setTargeting("permutive",e?JSON.parse(e):[]);var o=window.localStorage.getItem("permutive-id");o&&(window.googletag.pubads().setTargeting("puid",o),window.googletag.pubads().setTargeting("ptime",Date.now().toString())),window.permutive.config.viewId&&window.googletag.pubads().setTargeting("prmtvvid",window.permutive.config.viewId),window.permutive.config.workspaceId&&window.googletag.pubads().setTargeting("prmtvwid",window.permutive.config.workspaceId)}});
  
  // Check 3: If identity framework is used. It is advised to place it before permutive.addon

  // Check 4: Permutive.addon is present. This is essemtial to have Pageview events
  permutive.addon('web', {'Check 5 if there is custom properties for the Pageview they should be here'});
</script>
<!-- Check 6: Finally Permutive JavaScript should be loaded -->
<script async src="https://<ORGANIZATION_ID>.edge.permutive.app/<WORKSPACE_ID>-web.js"></script>

Important: Ensure the async property is present, as otherwise, it would block the site's javascript from running until it downloads and executes

The SDK is often fetched via loader scripts, but there should still be an element injected in the page structure. In the Elements tab, search for permutive to locate the HTML tag.

If everything works correctly, you will now be able to access the Permutive SDK command in the console, ie:

permutive.context

Verify Request Content & Responses

Checking Request Statuses.

Note: In the network tab, ensure all requests have a status of 20X or 30X. There should not be any requests to Permutive that read, "error?k= API".

Checking Event Requests and Response

In the Chrome Dev Tools network tab, find the events requests. Begin verification by checking that all event request responses returned a 200 or a valid response code.

Checking Pageview

Use the Chrome extension or the Network tab. If you can see the Pageview event, there is a good chance that Web collection is working correctly.

Note: False negatives are more common with the Chrome Extension. If you can’t see a Pageview within the Chrome Extension, open the Network tab and reload the page to find the Pageview, which is triggered by the permutive.addon function.

If events are being collected in our platform:

Highlight an event line
View at the Request Payload.

The payload will contain an array of events as shown below.

Tip: If you can find "Pageview" among them, it means the web collection is working.

Custom Properties are Added to the Pageview Event

If custom properties are intended to be sent to Permutive, check if these are included in permutive.addon() function. If custom properties are expected, they should be present under the json page object found in the previous verification. For example:

  permutive.addon('web', {
    page: {
      type: 'article',
      article: {
        id: '1234qwerty',
        type: 'kittens'
      }
    }
  });

Make sure relevant properties are passed under the “Pageview” event in the network requests. Look into the event calls to the API that contains the Pageview event. Also, in the Request Payload, check the values passed under properties. You'll see both standard and custom properties (in this case content is a custom property)

Tip: If the data is not present or the values are null/undefined when not expected, search for the permutive.addon('web') call in the site code (which can be in a separate JS file) and investigate.

Schema Errors

An event schema defines what properties can be passed into Permutive. If a page is sending a property that does not exist in the schema, the whole event is rejected. If the property is present in the schema and isn't passed, there is no rejection (unless the property is marked as required, which we strongly discourage).

When there is a schema error, it will be visible in the Permutive Browser Extension:

And in the Network tab, there would be a call to the events endpoint with a Response showing the error:

Check Event Rejection Dashboard

Your SA should have provided you with an Events Rejection dashboard. Here, you can easily see where errors occur in their root domain. If you do not have a Rejection dashboard available, don't hesitate to get in touch with your SA or support@permutive.com.

Custom Events

Information regarding custom events can be found in the Deployment Documentation provided by your Solutions Architect.

An example of a custom event implementation could look like the following:

window.permutive.track("ProductView", {
  "product": {
	  "car": {
			"id": "<STRING>", //e.g. "bac-2343960l"
			"name": "<STRING>", //e.g. "Audi Q2"
			"category": "<STRING>", //e.g. "estate"
			"brand": "<STRING>", //e.g. "Audi"
			"price": "<FLOAT>", //e.g. 21700
			"variant": "<STRING>", //e.g. "AUDI Q2 30 TDI Sport 5dr  diesel estate"
			"regDateFirst": "<STRING>", //e.g. "2018 [(68)]"
			"gearBox": "<STRING>", //e.g. "Manual"
			"mileage": "<INTEGER>", //e.g. 2000
			"bodyStyle": "<STRING>", //e.g. "Estate"
			"fuelType": "<STRING>", //e.g. "Diesel"
			"exteriorColourLast": "<STRING>" //e.g. "WHITE"
		}
	},
	"targetedSearchPhrase" : "<STRING>" //e.g. "Audi Q5 deals"
});

Note: All <TOKEN> values should be dynamically replaced.

Each time you trigger a custom event, an event request should be sent. The same verification process can be used for Custom Events as they were for Pageview events - verify the event is not responding with an error and all properties are being passed correctly.

Verifying GAM/DFP Targeting

Checking GAM Requests

Permutive key-value pairs are attached to GAM calls (if GAM targeting is enabled)

Search for ads? in the “Network” tab
Pick an ad request, scroll down, and find cust_params
Check if “permutive=” is appended, followed by segments.
Ensure the appropriate GAM reactions are set up in the Permutive UI, as only segments with the DFP reactions enabled will be passed through to the GAM for targeting

This is also visible in the Extension:

Note: The presence of RTS at the end of the list of cohorts stands for "Real Time Segmentation." This means that Permutive was fast enough to target on the first Pageview.

Checking targeting on the first Pageview

Open the website in Private Window and check that on first loading you are getting cohorts in cust_params.

GAM Cache Snippet is in the Header

It is very important to ensure targeting still happens even if the Permutive script does not load before the GAM calls are made

Right click and select "View Page Source". Search for “_pdfps” (stands for Permutive DFP Storage). You should find this piece of code:

Set a breakpoint. You can do this by clicking on the number of the line where the function is called (in the case below, by clicking on the number "327"). A blue arrow will appear, indicating your breakpoint.

Search for googletag.enableServices(); Set a breakpoint on this too.
Reload the page. Now the page will stop loading on both your breakpoints. Make sure the Permutive script is executed first - ie that the _pdfps a breakpoint is first.
Remove the breakpoints by clicking on the blue arrows again

Verifying App Nexus/Xandr Targeting

Search for v3 in the Network tab

Tip: You can also enable Xandr debug by adding “?ast_debug=true” at the end of the URL and you should be able to see the following in the console:

Search

Publisher Support

Web Deployment Verification