Prevent Marketo form fields from being hidden if Clearbit’s JavaScript does not load (using Reveal)

Last Updated: September 11, 2023

🔍 Please note: This article is for customers on Standard Bundle, Reveal, or Clearbit Platform plans.

 

(1) Deploy the Clearbit Tag (tags.js) and revealCallback function through Google Tag Manager.

** Skip to step (2) if you have already deployed the Clearbit Tag using GTM. 

 

Head over to the Clearbit platform and copy the Clearbit Tag (tags.js) script by clicking on this link https://app.clearbit.com/settings/configuration/tagsjs.

Inside Google Tag Manager, create a new custom HTML tag and paste the script. If you have an existing tag, verify the script matches the one you copied from the Clearbit platform.

 

(2) Afterwards grab the code below and paste it right above the Clearbit Tag (tags.js).

<script>
  function revealCallback(response){ 
    var reveal = response;
    window.reveal = reveal;
    dataLayer.push({ 
      event:"Clearbit Loaded", 
      reveal: reveal 
    }); 
  };
</script>

Set the tag to fire on All Pages. The end result should look like the screenshot below. Make sure to submit and publish our changes.

 

(3) Turn on the “Reveal data” feature toggle within the Clearbit platform.

Now that our Google Tag Manager changes are live, head back to the Clearbit platform (https://app.clearbit.com/settings/configuration/tagsjs) and turn on the “Reveal data” toggle found at the bottom of the screen.

(4) Provide a default value of false to the Clearbit Form Status field within your Marketo form.

Head on over to your Marketo form’s configuration and locate and click on the Clearbit Form Status field. If you click on the field, you’ll see a display of options on the right side of the screen. Go ahead and select the “Autofill” option and fill out the default value to false, like so:

Click save.

 

(5) Update the Clearbit-powered Marketo form fields’ visibility rules.

Still, within your Marketo form, click on each form field’s visibility rules and set its first condition to check for the Clearbit Form Status field to be true, rather than empty as it was before.

Repeat the same pattern for every other field that’s being powered by Clearbit. Note this will temporarily keep every field visible until we finish the rest of the setup.

 

(6) Create a trigger set to “Clearbit Loaded” in Google Tag Manager.

Back in Google Tag Manager, create a new trigger and select a trigger type of “Custom Event”.

Afterward, type in the word Clearbit Loaded inside the event name text box and have the trigger fire on all custom events. Save your changes.

 

(7) Create a tag in Google Tag Manager that will hide the Marketo form fields once Clearbit loads.

Finally, still within Google Tag Manager, create a new custom HTML tag and paste the following code:

<script>
  if (MktoForms2) {
    MktoForms2.whenReady(function(form) {
      form.setValues({
        clearbitFormStatus: "true"
      })
    })
  }
</script>

Set the tag to trigger on your previously created tag, “Clearbit Loaded”.

 

That’s it! These changes will guarantee your Marketo form will display all fields as it normally would in the scenario that Clearbit’s JavaScript doesn’t load on the website visitor’s page. 🎉