Skip to main content

Client-Side Pixel Tracking

Features of the Perform Universal Pixel :

  • Can be easily implemented on your website via tag managers like Google Tag Manager and Tealium.
  • Loads asynchronously without affecting page performance or SEO ranking.
  • Compliant with CCPA and GDPR. Supports Do Not Track (DNT) functionality.

Deploying a Client-Side Pixel​

Before you set up a conversion tracking pixel, ensure that you have the following prerequisites.

  • Valid credentials for the Perform Media Console (PMC) to copy the pixel script. You can alternately reach out to your Partner Manager for the pixel script.
  • Access and editing rights for your web page/tag manager to install the pixel.

Copying the Pixel Script​

You can either reach out to your Partner Manager for the pixel script or follow the instructions here to get the pixel script from PMC.

Deploying the Script​

The instructions below are for the manual setup of a pixel code on your website. To install the pixel via Google Tag Manager, follow these instructions. For additional assistance, please contact your Partner Manager.

The PMC pixel script can be divided into 2 portions.

1. Base Script​

The PMC base script must be placed in the header section of your website on every page.

caution

This is a sample script and should not be used for deployment. Please use the script from the pixel library on the console.

<script>
    !function(a, b, c, d, e, f, g)
    {if(a.ctrk)return;e=a.ctrk=function(){e.runner ?
        e.runner.apply(e, arguments) : e.q.push(arguments)};
    e.q=[];f=b.createElement(c);f.async=true;
    f.src=d+'?d='+a.location.hostname;g=b.getElementsByTagName(c)[0];
    g.parentNode.insertBefore(f,g);}
    (window, document,'script','https://c.pmsrv.co/v1/analytics.js');
    ctrk('boot', 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX');
    ctrk('record', 'page-land', {dnt: false})
</script>

2. Event Script​

The event script can be fired after a conversion event has occurred. For example, after events like Form-Submit, Add to Cart, or Purchase.

caution

This is a sample script and should not be used for deployment. Please use the script from the pixel library on the console.

<script>
    ctrk('record', 'add-to-cart', { dnt: false, payout: 10 })
</script>

The event script contains an optional JSON object parameter section that supports the following properties.

Property NameProperty FormatProperty Description
dntBooleanDo not Track property can be set to true to prevent the script from collecting any data on the user.
weightFloatWeight is an optional parameter typically used to attribute partial conversions.
payoutFloatIt indicates the $ value of the conversion.
transactionIdStringA custom, reportable id against conversions. For example, order-reference numbers or form reference numbers could be used.
cidStringPerform Media click id to record the conversion against an ad click.

Pixel Testing​

Please follow the steps below to test your deployment.

InstructionScreenshot
1. Navigate to the Library option from the left-hand side menu on the Console.

2. Click on Pixel (Client-Side).

3. Click on Test Your Pixel.		Client Side Pixel

Test your pixel shows all the pixel requests received by the PMC servers. These should not be treated as valid conversions.

Domain Change​

In the case where the domain changes within the conversion journey (e.g. your landing page domain is xyz.com and the conversion happens on abc.com), make sure all the macros present in the initial landing URL are carried forward to the new domain. For accurate conversion tracking, it is important to pass forward the Perform Click ID (macro {clickId}).

For affiliate marketing use-cases where the offers are dynamic and the domains change frequently, we recommend using conversion tracking via server-side pixel.

Deploy Perform Media Pixel via GTM​

You can follow the instructions here to deploy the Perform Media Pixel via Google Tag Manager.

Content Security Policy​

If your site is using a Content Security Policy (CSP), you will need to allow Perform Media Pixel’s JavaScript to load.

Methods​

You can enable CSP using any of the below methods:

  • The website can return the Content-Security-Policy HTTP header with appropriate values.
Content-Security-Policy: default-src 'self'
  • The <meta> element can be used to configure a policy.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />

Whitelisting the Perform Media Pixel​

  • Below is the syntax for whitelisting our domain when script-src-elem is present in the meta element or CSP HTTP headers.
"Content-Security-Policy": "default-src 'self' ; script-src 'self'; script-src-elem 'self' 'unsafe-inline' *.pmsrv.co"
  • If script-src-elem is not present, this change needs to be done in script-src directive.
"Content-Security-Policy": "default-src 'self' ; script-src 'self' 'unsafe-inline' *.pmsrv.co"
  • If script-src-elem and script-src are also not present, this change needs to be done in the default-src directive.
"Content-Security-Policy": "default-src 'self' 'unsafe-inline' *.pmsrv.co"

If <meta> element is used to configure the policy, similar changes can be made to the ‘content’ attribute of the meta element.

Last updated on