Recruiter widget configuration on your website

A general configuration of Data Layer events on your website

The key points of basic understanding of the data layer events are as follows:

Understanding the Data Layer:

The Data Layer is a JavaScript array that stores information needed by Google Tag Manager. It's like a virtual layer containing various data points such as user ID, click information, and job ID, which GTM utilizes for tracking.

Implementation of Data Layer:

The Data Layer is automatically initiated when the GTM container’s JavaScript Snippet is placed in a website's source code. Custom data collection (e.g., user ID, job ID) requires additional code implementation, usually handled by developers.

Data Layer Declaration vs. dataLayer.push:

- Data Layer Declaration: This method involves adding a Data Layer code snippet above the GTM container code. It's limited and only works if placed correctly. An example is adding page category information.

- dataLayer.push: This more flexible method allows adding data to the Data Layer regardless of its position in relation to the GTM container code. It's used for pushing events and can be utilized as a trigger for Google Tag Manager.

Using the Data Layer in GTM:

- Data Layer Variable: GTM uses custom data in the Data Layer through the creation of Data Layer Variables. These variables retrieve the latest value pushed into the Data Layer.

- Custom Event Trigger: Custom events in the Data Layer can be used to trigger specific tags in GTM. This is crucial for tracking specific user interactions on the website.

What is required for the Jobrock Recruiter widget script?

All the Jobrock Recruiter widget needs to work is the Job ID on the page. As long as the Job ID is there, the widget fires up smoothly and logs records in Salesforce under the related Job.

The Jobrock base pixel script can be copied from the Admin section -> Jobrock scripts -> Basepixel. Make sure to check the "Widget" checkbox before copying the script.

<!-- Jobrock basepixel script code -->
<script>
!function(w,d,e,v,n,t,s){if(w.jrq)return;n=w.jrq=function()
    {n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!w.h)w.h=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];
    t=d.createElement(e);t.async=!0;t.id='bpscript';t.src=v;t.setAttribute('cc','AADFJTMEGA');
    t.setAttribute('domain','{}');t.setAttribute('fenabled','["widget"]');
    s=d.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s);}
    (window, document,'script', 'https://hub.jobrock.com/assets/jr/basepixel.js?v='+new Date().toISOString());

jrq('init-widget', {atsId: {{jrJobId}}});
</script>
<!-- End Jobrock basepixel script code -->

How to use the Job variable in a Data Layer

Using the Job ID in Google Tag Manager (GTM) is crucial to ensure the proper functioning of the recruiter widget on every job page because the widget needs to know what job is related to a specific URL.

To implement this, make sure the Job ID is included in the data layer of each job page. Without the Job ID, the recruiter widget won't work as expected.

Follow these simple steps to integrate the Job variable:

Step 1: Access Google Tag Manager

Log in to your Google Tag Manager account and navigate to the container associated with your website.

Step 2: Create a Variable

Inside your container, go to the "Variables" section. Create a new variable specifically for the Job ID.

Step 3: Configure Variable Settings

Set up the variable to extract the Job ID from the data layer. Ensure that the variable is configured to capture the Job ID accurately.

The parameter in the script is "jrJobId", which means that this should be the title of the variable, and the "Data Layer Variable Name" should contain the field in the data layer that contains the Job ID. This depends on your configuration.

Step 4: Enable on Job Pages

Make sure to enable the presence of the Job ID in the data layer specifically on job pages.

Step 5: Test and Debug

Before deploying the changes, use the GTM preview mode to test whether the Job ID is correctly populated on job pages. Debug any issues that may arise during testing.

Step 6: Publish Changes

Once testing is successful, publish the changes to make the Job ID live on the job pages of your website.

A relevant example of the Data Layer

On the job pages of your website, the data layer can be robust and include various job-related information. Below is an example of a comprehensive data layer for a job page:

dataLayer.push({
  'event': 'jobPageViewed',
  'jobId': '123456', // Unique identifier for the job
  'jobTitle': 'Senior Software Engineer',
  'jobCategory': 'Engineering',
  'jobType': 'Full-Time',
  'location': 'Amsterdam,
  'salary': '$120,000 - $150,000',
  'experienceRequired': '5+ years',
  'skillsRequired': ['JavaScript', 'React', 'Node.js'],
  'company': {
    'name': 'Tech Innovators Inc.',
    'industry': 'Technology',
    'size': 'Large Enterprise',
    'location': 'Amsterdam',
  },
  'applicationDeadline': '2023-07-31',
  'postedDate': '2023-07-01',
  'customAttributes': {
    'RemoteWork': true,
    'Benefits': ['Health Insurance', 'Flexible Hours'],
  },
  'user': {
    'loggedIn': true,
    'userId': '987654', // Unique identifier for the logged-in user
    'userType': 'JobSeeker',
  },
});

In this example:

• The 'jobPageViewed' event signifies that a user has viewed a job page.
• Various job details such as ID, title, category, type, location, salary, required skills, company information, application deadline, and posted date are included.
• Custom attributes like remote work availability and benefits are also captured.
• User-related information includes whether the user is logged in, their ID, and user type.

This comprehensive data layer provides a rich set of information that can be utilized for analytics, personalization, and tracking user interactions on the job page. It serves as a foundation for triggering various events or tags in tools like Google Tag Manager to enhance analytics and marketing efforts.

Regular website configuration

Configuring the Data Layer and Google Tag Manager (GTM) involves a few steps. Here's a guide on how you can set it up:

Step 1: Implement Data Layer on Your Website

Include the Data Layer script in the <head> section of your website. Ensure this is included on all pages where you want to track job-related events.

<script>
  window.dataLayer = window.dataLayer || [];
</script>

Step 2: Push Data on Job Page

On the job page, push the job-related information to the Data Layer using JavaScript. This could be triggered on page load or any relevant user interaction.

<script>
  dataLayer.push({
    'event': 'jobPageViewed',
    'jobId': '123456',
    'jobTitle': 'Senior Software Engineer',
    // Include other job details as in the example above
  });
</script>

Step 3: Set Up Variables in GTM

In your GTM, create a new variable for each piece of information you want to capture. For example, create a variable named jrJobId with the type "Data Layer Variable" and configure it to retrieve the 'jobId' value that we need to trigger the Recruiter widget successfully.

Step 4: Create a Trigger

Create a trigger that listens for the 'jobPageViewed' event. In GTM:

1. Go to the "Triggers" section.

2. Create a new trigger.

3. Choose the trigger type as "Custom Event."

4. Set the event name to 'jobPageViewed' (or the name you used in the dataLayer push).

Step 5: Set Up Tags

Create a tag for the Recruiter widget that you want to fire when a user views a job page.

1. Go to the "Tags" section in GTM.

2. Create a new tag.

3. Choose the tag type based on your requirement (e.g., JR - Recruiter widget).

4. Set up the configuration for the tag.

5. In the "Triggering" section, select the trigger you created earlier.

Canvas configuration

For detailed instructions on the Canvas configuration of the Recruiter widget, click here. This guide will walk you through the step-by-step process to optimize your recruiter widget settings for a seamless experience.

Validation & Verification of all Channels

Preview and Publish

1. Use the GTM preview mode to test if the Recruiter widget fires correctly when you view a job page.
2. Once everything works as expected, publish your changes in GTM to make them live on your website.
3. Test your configuration according to the steps here.