Set Up Personalization in Google Optimize Using the Clearbit Tag and Google Tag Manager

Last Updated: December 2, 2022

Running personalization experiments in Google Optimize using Clearbit data requires you to tap into the reveal payload surfaced to the frontend of your website. We’ll use the Clearbit Tag and Google Tag Manager to achieve this.

For pricing information, please fill out the demo-request form on our pricing page to get in touch with a sales representative.

Skip Ahead to: 

Set Up Personalization in Google Optimize Using the Clearbit Tag

  1. In Clearbit, click the Connections tab in the sidebar, and click the Set up button next to the Clearbit tag and toggle the Reveal data option found at the bottom of the page.
    Screen_Shot_2022-06-23_at_4.34.12_PM.png
    Every time the Clearbit Tag loads on your page, Clearbit will now invoke a callback function called revealCallback through which you can access the company data returned by the IP address of your website visitor.
  2. In Google Tag Manager, edit the existing Custom HTML tag that’s firing the Clearbit Tag and include the code that will unlock this reveal data. Your current tag should look similar to this:
    Screen_Shot_2022-06-23_at_4.55.51_PM.png
    Edit the HTML and paste the following code snippet above line 1:
     
    <script>
      function revealCallback(response){
        var reveal = response;
        window.reveal = reveal;
        dataLayer.push({ 
          event:"Clearbit Loaded",
          reveal: reveal 
        });
      };
    </script>
    The updated tag should look like this:
    Screen_Shot_2022-06-23_at_5.00.06_PM.pngSave your changes and publish your container.
  3. If you head over to your website, you can now access the reveal data by opening your browser’s JavaScript console and typing window.reveal or simply reveal.Screen_Shot_2022-02-22_at_10.33.13_AM.png

Use Audience Targeting Settings in Google Optimize to Filter Website Traffic Using Clearbit Data

  1. Now that we have Clearbit data to work with, in Google Optimize, you can use the audience targeting settings to filter website traffic using Clearbit data. Here’s an example that only considers visitors where the company industry equals Internet Software & Services and the employeesRange equals 10k-50k. Screen_Shot_2022-06-23_at_5.23.26_PM.pngThis involves creating a Custom JavaScript rule that checks if the reveal payload exists and there’s Clearbit company data available. If true, then you can fetch the desired Clearbit attribute by referencing our Reveal API documentation.
    Here’s what the custom JavaScript rule looks like for our Clearbit Industry example above:
     
    function() { 
        if (window.reveal && window.reveal.company) { 
        var industry = window.reveal.company.category.industry;
    return industry; 
      } 
    }
    Screen_Shot_2022-06-23_at_5.23.47_PM.pngScreen_Shot_2022-06-23_at_5.22.04_PM.png
  2. With our filtering rules in place, we now have to tell Google Optimize when we would like this experience to trigger. Scroll to the bottom of the page until you find the Activate event section. It’s currently set to Page load by default.
    Screen_Shot_2022-06-23_at_5.27.57_PM.png
    Let’s change that to have it trigger on the custom event Clearbit Loaded, which matches the event fired through our updated Custom HTML tag in Google Tag Manager from earlier. Click Done to save your changes.
    Screen_Shot_2022-06-23_at_5.31.57_PM.png
    💡 Clearbit Tip: We recommend reviewing your personalization A/B test on a new test page or an existing low-traffic page on your website before going live. Additionally, make sure you don't over filter your audience. It needs to be big enough to meaningfully report on your experiment.
  3. (Optional) If you’d like to use Clearbit data as part of your website’s variant page, you can manipulate the DOM to select any HTML element and swap its value with a Clearbit attribute. A simple example would be changing the page’s heading to the revealed company’s legal name. 
    var heading = document.body.querySelector("h1"); 
    var companyLegalName = window.reveal.company.legalName; 
    heading.innerText = companyLegalName;


    Screen_Shot_2022-01-26_at_4.40.29_PM.png
    DOM manipulation is a more advanced topic outside the scope of this help article and we’d recommend getting help from a developer and reviewing some of the resources below.

Additional Resources