Skip to content
Raise a Ticket
Contact us
  • There are no suggestions because the search field is empty.

How do I load the Pearl Diver tracking pixel on my website?

Installing your Pearl Diver pixel to your website

A tracking pixel is a small piece of code that allows you to gather valuable insights about user behavior on your website and collect this data. By properly implementing your unique Pearl Diver tracking pixel into your website, you can monitor visitor activity, analyze collected data for this visitor, and refine your marketing strategies based on these findings. Here's a step-by-step guide on how to load a tracking pixel into your website, along with instructions for common website hosts.

Step 1: Obtain Your Tracking Pixel Code

Before you begin, you'll need to acquire the tracking pixel code from the Pearl Diver team. You will receive the pixel from your sales executive or onboarding specialist upon sign up. This code consists of a JavaScript snippet that contains the necessary tracking information for your specific website domain. 

 

Step 2: Adding the Tracking Pixel to Your Website

The code snippet should be installed in a global location in your site code. This could be a <head> or <body> tag element or placed and deployed using Google Tag Manager (GTM). Successful installation would show the code snippet being visible when inspecting the code in your browser (right click > select 'inspect' and search for code containing "pearldiver.io").
 
Below are instructions for adding a tracking pixel to websites hosted on different platforms:
 
WordPress:
Option 1
    1. Go to your applications and add "WPCode", if you don't already have it.
      1. Install and Activate the plugin.
      2. This adds a new menu item below the settings called "Code Snippets"
    2. Go to "Code Snippets" -> "Header and Footer"
    3. Paste the provided script code into the Header section and click save.
    4. If you have any plugins that speed the website up using lazy loading, follow this guide to add exceptions so the pixel can fire normally.
    5. Recommend you clear the website cache to ensure the pixel loads immediately - there will usually be a plugin installed for this. Look for Wp rocket at the top for example. See image below.
    6. For more detailed instructions and troubleshooting, refer to the WordPress support guide.
Option 2
  1. Navigate to your WordPress dashboard.
  2. Go to ‘appearance’ in the left menu - hover over this
  3. Click on ‘Theme file editor’ (usually the last option when you hover over appearance)
  4. On the right will be a list of sections - find the option for header.php and click this
  5. Paste the tracking pixel code at the bottom of the header code section, before the <header/> text  - This means the pixel will be inside the header as the above closes the header
  6. Update and/or publish the page to save changes.
  7. If you have any plugins that speed the website up using lazy loading, follow this guide to add exceptions so the pixel can fire normally.
  8. Recommend you clear the website cache to ensure the pixel loads immediately - there will usually be a plugin installed for this. Look for Wp rocket at the top for example. See image below.
  9. For more detailed instructions and troubleshooting, refer to the WordPress support guide.
*If loading to a specific page and not the global header, s witch to the "Text" or "HTML" editor (not the Visual editor).
 
Google Tag Manager:
  1. Log in to your Google Tag Manager account.
  2. Create a new Tag by selecting 'Add Tag'
  3. Choose the "Custom HTML" tag type.
  4. Paste the tracking pixel code into the HTML field.
  5. Configure the trigger to fire on the desired pages - recommend all pages
  6. Save and publish the Tag.
  7. For specific guidance, check out the Google Tag Manager help center.
Wix:
  1. Open your Wix website editor.
  2. Go to Site in the right-corner > Settings
  3. Find 'Custom Code'
  4. Add Code- paste the script in the 'Head Code' section. Save and republish your website to put the change into effect.
  5. Find additional assistance in the Wix Help Center.
cPanel:
  1. Log in to your cPanel account.
  2. Look for the "File Manager" and navigate to your website's directory.
  3. Find the HTML file where you want to insert the tracking pixel.
  4. Click on the file and choose "Edit" or "Code Edit."
  5. Paste the tracking pixel code and save the file.
  6. Refer to your hosting provider's documentation for more information on using cPanel.
 
Shopify:
*If you are want to use multiple pixels you will need to set up Google Tag Manager
  1. Access your Shopify admin panel.
  2. Go to "Online Store" > "Themes."
  3. Click on the "Actions" button and select "Edit Code."
  4. Find the appropriate template (e.g., theme.liquid) to add the tracking pixel.
  5. Paste the tracking pixel code and save the file.
  6. Shopify's help center can provide further guidance.
 
HubSpot Website Manager:
  1. Log in to your HubSpot account.
  2. Navigate to your website dashboard.
  3. Go to "Settings" > "Website" > "Advanced Options."
  4. In the "Head HTML" section, paste the tracking pixel code.
  5. Save your changes.
  6. Detailed instructions are available in the HubSpot knowledge base.

Step 3: Verify and Test

After adding the tracking pixel, it's essential to verify its functionality.  Ensure the pixel has been loaded correctly, is firing and capturing the data and not facing any loading issues by following the below.

  1. Open the website the pixel was added to in an incognito or private browsing window
  2. Right click and choose the 'inspect' option OR click F12 on keyboard

  3. You may need to click the two arrows at the top of the inspect menu and choose the ‘Applications’ option.

  4. Expand the Cookies option

  5.  If you see your white-labeled tag or a tag labelled 'pearldiver.io' here this means the pixel has been loaded correctly



NOTE: If your tag is not displaying here, it could be due to 'lazy loading' on the website preventing it from firing for 1-2 minutes resulting in much lower traffic being identified. Use this guide to correct lazy loading.

By following these steps, you'll be able to effectively load a tracking pixel onto your website, regardless of the hosting platform you use. Remember to always review and test to ensure accurate data collection. 
 

✅Book a support call if you need help

Book a call with Pearl Diver support by clicking this link.
Please have your Website admin login on hand and hosting login as well, as sometimes you will need to clear the cache.