1. Home
  2. Docs
  3. Optimize
  4. Advertiser Pixel
  5. Installation

Installation

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.

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/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

To keep track of how many clicks a job is generating (organic or sponsored) you will need to send a click request to our server. To do this, run a jdxtag('_click') function on every job page within the <body> tag. When making a _click request you’ll need to also pass a mandatory job identifier so that we know which job was viewed (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("_click", jobId) <!-- jobId should be the jobs reference number in our system -->
    </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')) takes a mandatory job identifier parameter (belonging to the job the user just applied for) 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', appliedJobId)
  </script>
  <!-- PIXEL CONVERSION SNIPPET START -->
</body>
</html>

Step 4: Enable User Tracking

NOTE: Tracking statistics are not yet implemented in our dashboard

Lastly, for pages that are not related to click or conversions you can still track a users behavior similar to tools such as Google Analytics. By adding a jdxtag('_track') function to the <body> tag of those pages you can send a request to our system to store user data from that page visit. This will allow you to track which pages users are visiting, in what order, and how often to better understand how potential applicants are using your website. Add the following code snippet to any pages that you aren’t already tracking clicks or conversions, like say your job index page:


<!DOCTYPE html>
<html lang="en">
<head>
<!-- HEAD SNIPPET WILL BE HERE -->
</head>
<body style="display: flex; flex-direction: column; margin: 0">
  <section style="display: flex; flex-direction: column; padding: 10px">
    <h1>Jobs</h1>
    <ul>
      <% htmlJobs.forEach(function (job) { %>
        <a class="job" href="/html/jobs/<%= job.id %>">
          <li style="border: 1px solid gray; padding: 10px; margin-bottom: 10px">
            <p><%= job.title %></p>
            <p><%= job.description %></p>
          </li>
        </a>
      <% }); %>
    </ul>
  </section>
  <!-- PIXEL TRACK SNIPPET START -->
  <script>
    jdxtag("_track")
  </script>
  <!-- PIXEL TRACK SNIPPET END -->
</body>
</html>

Note that if you have a Single Page Application you should ensure you are setting the current URL and referrer URL to be sure that the data being sent is recorded properly.