The Programmatic Pixel is a JavaScript pixel that lives on your website and gives you the ability to report user actions to Optimize which allows to generate reports allowing you to receive better insight into what jobs users are viewing and applying for to better understand how to improve job visibility and conversion rates.
From a technical side, the pixel code is loaded onto your site by implementing the Head Snippet which gives you access to the jdxtag() function anywhere on your page. This function accepts various parameters which allow you to send requests to our server and even customize the data being sent alongside it like metadata, custom URLs, and more!
The installation is a four step process: add the Head Snippet, enable Click Tracking, enable Conversion Tracking, and enable User Tracking.
If you have an user account with Optimize already you can log in and go to the pixel section to get a customized set of install instructions. It will be generated based on a survey you fill out on what your website’s structure and capabilities are. The following guide is a general concept set of instructions
Step 1: Install Head Snippet
This required step loads the script onto your page and allows you to configure how requests are sent to the Optimize server. This bit of code lives in the <head> tag of every page on your website in order for the pixel to function properly.
First you will need to find the correct Head Snippet code for your specific account. This is located within an account’s dashboard so you will need to log into your Optimize user account and navigate to the desired account’s Pixel section. Copy the code block in the Step 1: Install Head Snippet section and paste it into the <head> tag on your website.
Note that the following example uses a sample snippet but it still demonstrates where the snippet should live on your page (please use your own snippet from your account’s pixel section).
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MY JOB WEBSITE</title>
<style>a {text-decoration: none;color: black;}ul {list-style-type: none;padding: 0;margin: 0;}</style>
<!-- PIXEL HEAD SNIPPET START; REPLACE BELOW WITH YOUR ACCOUNT'S SCRIPT -->
<noscript><img src="https://track.jobadx.com/v1/t.gif?utm_pixel=<XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX>&v_js=false" height="1" width="1" style="display: none" alt="" /></noscript>
<script async src="https://optimize-pixel.jobadx.com/pixel.js" type="text/javascript"></script>
<script>
window.jdxLayer = window.jdxLayer || []
function jdxtag {jdxLayer.push(arguments)}
jdxtag("config", "_setPixel", "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")
jdxtag("config", "_pixelTimeZone", "Eastern Time (US & Canada)")
</script>
<!-- PIXEL HEAD SNIPPET END -->
</head>
For more details on the Head Snippet see the dedicated section in our docs.
Step 2: Enable Click Tracking
If you would prefer to only track conversions you can skip this step and move on to the next one.
If you would like to keep track of how many clicks a job or page is generating (organic or sponsored) you will need to send a tracking request to our server. To do this, run a jdxtag('_track') function on every page within the <body> tag. A sample snippet for a _track request for a non-job page only requires you to make the request, no parameters are needed:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="display: flex; flex-direction: column; margin: 0">
<section style="display: flex; flex-direction: column; padding: 10px">
<h1>Sales Rep</h1>
<p>This is a job for a self driven person...</p>
</section>
<!-- PIXEL CLICK SNIPPET START -->
<script>
jdxtag("_track")
</script>
<!-- PIXEL CLICK SNIPPET END -->
</body>
</html>
When making a _track request for a job page you can also pass a job identifier and/or click id so that we know which job was viewed by which user (you’ll need to dynamically add this based on what job is being shown to the user). An example implementation can be seen below:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="display: flex; flex-direction: column; margin: 0">
<section style="display: flex; flex-direction: column; padding: 10px">
<h1>Sales Rep</h1>
<p>This is a job for a self driven person...</p>
</section>
<!-- PIXEL CLICK SNIPPET START -->
<script>
jdxtag("_track", { jobId: "{{JOB_ID}}", clickId: "{{CLICK_ID}}" }) <!-- {{jobId}} should be the jobs reference number in our system and {{CLICK_ID}} will be from the utm_click parameter we send on redirect -->
</script>
<!-- PIXEL CLICK SNIPPET END -->
</body>
</html>
Without passing the correct job identifier as a parameter (jobId in the example) we cannot provide a job’s view metrics so it is important to verify the job identifiers hosted on your page align with the identifiers in our system and are being passed in correctly! When our system redirects a user we will attach variables to the URL which you can parse and save in your system. These can be used for your own internal reporting and be used when reporting conversions. See our Redirect Variables section on what is being passed.
Note that for Single Page Applications you’ll also want to provide the previous and current URL manually since the pixel cannot infer that information from the browser. See the section on installing the pixel for an SPA for more information.
Step 3: Enable Conversion Reporting
The next step involves setting up tracking conversions. You must add a jdxtag() function with the conversion parameter at the end of the <body> tag of the page you show users once they’ve successfully applied. Along with the request type the conversion function (jdxtag('_conversion')) accepts both a job identifier and click id parameter (belonging to the job the user just applied for and the click assigned to the user on redirect respectively) which allows Optimize to tally a conversion for that job in our system.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="display: flex; flex-direction: column; margin: 0">
<section style="display: flex; flex-direction: column; align-items: center">
<h1>Confirmation</h1>
<hr style="width: 10vw" />
<p>Thank you</p>
<a href="/home">
<button style="padding: 10px">Home</button>
</a>
</section>
<!-- PIXEL CONVERSION SNIPPET START -->
<script>
jdxtag('_conversion', { jobId: "{{JOB_ID}}", clickId: "{{CLICK_ID}}" }) <!-- {{jobId}} should be the jobs reference number in our system and {{CLICK_ID}} will be from the utm_click parameter we send on redirect -->
</script>
<!-- PIXEL CONVERSION SNIPPET START -->
</body>
</html>
Note that while leaving jobId and clickId blank is allowed, the accuracy of the data is greatly reduced than if you supply one or both of the variables.