Using Reveal for Optimizely Audiences & Variations

The keys to effective site personalization are to build the right audiences & site variations. With Reveal integrated into Optimizely, you can tailor the digital experience based on which companies are visiting your site - even if they've never self-identified.

This article will show you several examples of how to use Reveal attributes:

Within Optimizely Audiences

and JavaScript variation code snippets.

To start with, here is:

    <=      for     less than
    >=      for     greater than
    !=       for     equal to
    ==      for     not equal to
    ||        for     OR
    &&     for     AND

Now, onto our examples!

1) Build an audience for visitors that use ANY of the following technologies: Google Analytics, AdRoll, or Google Apps

Here's the Custom Javascript you would paste in:
window.reveal && (window.reveal.company.tech.indexOf('google_analytics') != -1 || window.reveal.company.tech.indexOf('adroll') != -1 || window.reveal.company.tech.indexOf('google_apps') != -1)

2) Build an audience for visitors that are classified with ANY of the following Industry Tags: Media or Communications

Here's the Custom Javascript you would paste in:

window.reveal && (window.reveal.company.tags.indexOf('Mobile') != -1 || window.reveal.company.tags.indexOf('Communications') != -1)

3) Build an audience for visitors that belong to ALL of the following Industry Tags: SaaS and B2B

Here's the Custom Javascript you would paste in:

window.reveal && (window.reveal.company.tags.indexOf('B2B') != -1
&& window.reveal.company.tags.indexOf('SaaS') != -1)

4) Build an audience specific to your target account list (for ABM)

Here's the Custom Javascript you would paste in for some sample accounts:

window.reveal && ['slack.com','uber.com','ibm.com','cisco.com','microsoft.com'].indexOf(window.reveal.company.domain) != -1

Within the Variation Code editor, you could then show the actual company's name when they visit with a simple line of jQuery:

$("h1").text(window.reveal.company.name)

5) Create a variant that only shows relevant customer logos based on the visitor's Industry Tag

Here's some sample Javascript you could use within the Variation Code editor:

if (window.reveal && window.reveal.company.tags.indexOf('Finance') != -1) {
  $('#default-logos').hide()
  $('#customized-logos').show()
}

6) Create a variant that shows personalized messaging based on identifiable technology

Here's some sample Javascript you could use within the Variation Code editor:

if (window.reveal && window.reveal.company.tech.indexOf('mixpanel') != -1) {
  message = 'See why our new Analytics platform blows Mixpanel out of the water.'
  $('#message').text(message)
}

Pro tip: Show competitive messaging or content to site visitors who use your rival's product and may want to switch to yours

7) Create a variant that shows personalized messaging for companies above 1000 employees

Here's some sample Javascript you could use within the Variation Code editor:

if (window.reveal && window.reveal.company.metrics.employees > 1000) {
  message = 'Our new platform is built for Enterprise'
  $('#message').text(message)
}

If you wanted to take it a step further, you could also change the call-to-action (CTA) by showing/hiding a special button only for your target companies:

if (window.reveal && window.reveal.company.metrics.employees > 1000) {   
  $('#enterprise-contact-button').show() 
}

Or you could adjust the hero section based a specific subset of target accounts:

if (window.reveal && ['slack.com', 'uber.com', 'ibm.com', 'microsoft.com', 'cisco.com'].indexOf(window.reveal.company.domain) != -1) {  	
  $('#default-hero').hide()	
  $('#enrichment-hero').show()  
}