Clearbit Personalizer: User Guide

Before you begin

• To use this app, you must have a Clearbit account on an Enterprise plan, and must obtain a Reveal API key from Clearbit. To get a Clearbit Reveal API key, contact your Clearbit representative.
• If your Hub uses Front End V2, you must also install the Compatibility Pack app. If you are not sure if your Hub uses Front End V2, see this article for help.

 

About Clearbit Personalizer

This app personalizes selected Streams using Clearbit data. It can:

• Dynamically filter a Stream to only show Items that match data on the current visitor from Clearbit (using tags)
• Automatically populate the visitor’s organization logo on Streams that use the Banner+Logo template
• Automatically insert values from the visitor’s Clearbit data into variables placed in Hub text: titles, descriptions, body text, CTAs, etc.

 

Setup: Enabling Item tags for Custom Code

Clearbit Personalizer uses Uberflip Item tags to personalize content for individual visitors. By default, these tags are only displayed in the Uberflip app, and are not included when an Item is viewed in the Hub's front end. To make these tags available to app like Clearbit Personalizer, you must enable the setting Include Item tags for Custom Code.

1. Log in to your Uberflip account and use the Hubs menu to select the Hub where you want to enable the setting.
2. Click on Hub Options > Advanced.
3. Under the section Content Experience, check the box next to Include Item tags for Custom Code:
   
4. The change will be saved automatically, and will take effect immediately.

 

Configuring the Clearbit Personalizer app

To use Clearbit Personalizer in your Uberflip account, configure the app's settings. These settings control the app's functionality, and how it is applied to your Hubs and Streams.

You can configure settings for Clearbit Personalizer at the Account Level, the Hub Level, the Stream Level, or all three:

• Any settings you configure at the Account Level will apply to all Hubs in your account.
• Any settings you configure at the Hub Level will apply to that Hub only. If you have also configured Account Level settings, Hub Level settings will override them for that specific Hub.
• Any settings you configure at the Stream Level will apply to that Stream only. If you have also configured Account and/or Hub Level settings, Stream Level settings will override them for that specific Stream.

Some of this app's settings can only be configured at certain levels. The level(s) at which any given setting are available are indicated beside each setting below.

For instructions on how to access Account, Hub, and Stream Level settings for any Uberflip Marketplace app, see Configure settings for Uberflip Marketplace apps.

Reveal API Key

Available at: Account Level | Hub Level

Required This setting is used to specify your Clearbit Reveal API key, which activates the app and allows it to access the Clearbit API.

• To activate the app, enter your Clearbit Reveal API key into the field.

Enable

Available at: Stream Level

Optional This setting is used to enable the Clearbit Personalizer app for the current Stream.

When this setting is turned on, the app will be active on the current Stream, using the settings you have defined at the Stream Level. If a setting is not defined at the Stream Level, the app will use the Hub Level settings (if set), or otherwise the Account Level settings (where no Hub Level setting exists).

• This setting is only available at the Stream Level, and is turned off for all Streams in all Hubs in your account by default.
• To use the Clearbit Personalizer app to personalize a Stream, you must turn on this setting for that Stream individually.
• Until you have turned this setting on for at least one Stream in your account, the Clearbit Personalizer app will have no effect on your account (even if the app has been fully configured at the Account and/or Hub Level).

Filter Items by Tags

Available at: Account Level | Hub Level | Stream Level

Optional This setting is used to control Clearbit Personalizer's dynamic filtering functionality.

When this setting is turned on, the app will filter the Items in the specified Stream(s) so that only Items tagged as relevant to the current visitor are displayed. For example, if a visitor's Clearbit data indicates that their industry is Financial Services, then the Stream will be filtered to show Items that you have tagged as relating to the financial services industry.

• In order for this functionality to work, you must set up Clearbit Attribute Tags in your Uberflip account, and add them to all Items in Streams where Clearbit Personalizer is active. See Using Attribute Tags for more information.
• When Filter Items by Tags is enabled, an Item must have at least one Attribute Tag matching any attribute in the visitor's Clearbit data to be displayed. Items that do not have at least one matching Attribute Tag (or which have no Attribute Tags) will not be displayed.
• If an Item has multiple Attribute Tags, only one of these tags needs to match the visitor's data for that Item to be displayed.
• By default, the minimum number of matching Items that will be displayed is one. If no Items in a Stream have Attribute Tags that match the visitor's Clearbit data, all Items in the Stream will be shown (to avoid showing the visitor an empty Stream).
  
  • Using the Show Always Tag changes this behavior. If you use the Show Always Tag, then only Items that have the Show Always Tag will be displayed in this situation (rather than all Items in the Stream).
• When a Stream is filtered, the order in which the Items are shown will still be the same as in the original (unfiltered) Stream, except with the filtered Items hidden. For example, if five Items in a Stream are in the order 1-2-3-4-5 and Items 1 and 4 are filtered out, the Stream will still display the remaining Items in the order 2-3-5.

Using Attribute Tags

To use the Filter Items by Tags functionality, you must add Attribute Tags to all Items that appear in Streams where Clearbit Personalizer is enabled. Attribute Tags are specially-formatted tags which you use to indicate to Clearbit Personalizer which content Items should be displayed if a visitor has a given attribute in their Clearbit data.

To apply an Attribute Tag to an Item, simply add it to the Item in the same way as a normal Item Tag (see Use Tags on your Items for instructions). Attribute Tags use the following structure:

clearbit.[attribute].[subattribute].[value]

Within this basic format, replace:

• [attribute] with the Clearbit main attribute.
• [subattribute] with a Clearbit secondary attribute that belongs to the main attribute chosen, e.g. cityfor the main attribute geo.
  • If you choose an attribute that does not have a subattribute, simply omit this section, i.e. use the format clearbit.[attribute].[value] instead.
• [value]with the attribute’s desired value. For example, the tag clearbit.geo.city.Chicago would indicate that the tagged Item should be displayed if a visitor’s city attribute in Clearbit is "Chicago", and would therefore be applied to Items relevant to that topic.

Note that values in the tags must match Clearbit values exactly: any spaces, parentheses, etc. that exist in the Clearbit value must also exist in the tag. For a list of Clearbit's main and secondary attributes and values, contact your Clearbit representative.

Using the Show Always Tag

You can choose to always display certain Items, regardless of the visitor's Clearbit data. To do this, use the Show Always Tag:

clearbit.show

This tag is created automatically when you install Clearbit Personalizer. To use it, simply add it to any Items that you want to always be displayed in Streams where Clearbit Personalizer is active (provided the Item has been added to the Stream). This is useful for content that is relevant to a very wide audience and should be shown to all visitors, as well as to avoid instances where only one or two Items would be shown in the Stream based on Attribute Tags alone.

If you use the Show Always Tag, keep in mind that the filtered Stream will still respect the Item order set for the full Stream. As a result, we recommend placing Items with the Show Always Tag either at the beginning or end of the Stream (depending on the content).

Swap Logo

Available at: Account Level | Hub Level | Stream Level

Optional This setting is used to control Clearbit Personalizer's dynamic logo functionality.

When this setting is turned on, the app will use a visitor's Clearbit data to search Clearbit's Logo API for the logo of the visitor's organization. If a logo is found, it is automatically inserted into the Prospect Logo space on Marketing/Sales Streams that use the Banner+Logo template.

• Use the setting Remove Logos When No Match Found to determine what happens if no matching logo can be found.

Remove Logos When No Match Found

Available at: Account Level | Hub Level | Stream Level

Optional (enabled by default if you have turned on the Swap Logo setting). This setting is used to control the behavior of the Swap Logo setting in cases where no matching logo for the visitor can be found on Clearbit.

If no matching logo is found:

• When this setting is turned on, both logos will be hidden from the banner.
• When this setting is turned off, the "generic" Prospect Logo you set for the Stream will be displayed.

Search & Replace

Available at: Account Level | Hub Level | Stream Level

Optional This setting is used to control Clearbit Personalizer's dynamic text replacement functionality.

When this setting is turned on, Clearbit Personalizer will dynamically populate any variables (placeholders) you have placed in text across your Hub with values from the visitor's Clearbit data, for example their company name, industry, or location.

• You can place variables in virtually all editable text across your Hub, including Stream, Item and CTA copy text. See Using Search & Replace variables for more details.

Using Search & Replace variables

To use the Search & Replace functionality, insert specially formatted variables into editable text in your Hub, such as body text, titles, descriptions, etc. Variables must be placed within curly brackets ({ and }), and must follow the formatting shown in the table below.

Variables are available for Company Name, Sector, Industry, City, State, Country, and Website. For example, if a visitor’s geo.city attribute in their Clearbit data is set to Chicago, they will see the word "Chicago" anywhere you have placed the City variable.

Clearbit attribute name	Use this variable	Description
Company Name	{clearbit.name}	The full name of the visitor's organization, e.g. "Cisco Systems"
Sector	{clearbit.category.sector}	The visitor's sector, e.g. "Information Technology"
Industry	{clearbit.category.industry}	The visitor's industry, e.g. "Software & Services"
City	{clearbit.geo.city}	The visitor's city, e.g. "San Jose"
State	{clearbit.geo.state}	The visitor's state, e.g. "California"
Country	{clearbit.geo.country}	The visitor's country, e.g. "United States"
Website	{clearbit.domain}	The visitor's website, e.g. "cisco.com"

Search & Replace: company name/city/state/etc.

Available at: Account Level | Hub Level

Optional When the Search & Replace setting is turned on, these settings are used to specify custom default values, if desired. These default values will be inserted into Search & Replace variables whenever no applicable value can be found in a visitor's Clearbit data.

• To specify a custom default value, enter the desired value for each attribute into the corresponding field.

• If you do not specify a custom default value for a given attribute (i.e. if you leave its field empty), its system default value will be used instead. The system default value for each attribute is:

  • Company Name: "Your Company"
  • Sector: "Your Sector"
  • Industry: "Your Industry"
  • City: "Your City"
  • State: "Your State"
  • Country: "Your Country"
  • Domain: "Your Website"

Previous Item Navigation Label

Available at: Account Level | Hub Level

Optional This setting is used to specify a custom label for the Previous Item area while viewing an Item.

• To specify a custom label for the Previous Item area, enter it into the field.
• If you do not specify a custom label (i.e. if you leave the field empty), the system default label ("Previous Item") will be displayed.

Next Item Navigation Label

Available at: Account Level | Hub Level

Optional This setting is used to specify a custom label for the Next Item area while viewing an Item.

• To specify a custom label for the Next Item area, enter it into the field.
• If you do not specify a custom label (i.e. if you leave the field empty), the system default label ("Next Item") will be displayed.

Log Mode for Marketers

Available at: Account Level | Hub Level | Stream Level

Optional This setting is used to log basic debugging information in the browser console.

When this setting is turned on, Clearbit Personalizer will record information about what the app is doing in the browser console, such as what has been filtered and why. In addition, the data the app received from Clearbit for the current visitor will also be shown.

• To view these logs that are generated when this setting is enabled, you must open the console in your browser. How you do this will vary based on the browser you use; for instructions on how to open the console in Chrome, see this article from Google.

 

Best practices

When using this app, we recommend the following for best results:

• For Streams and Items that you intend to share on social media, avoid using Search & Replace placeholders in the Title and Description fields. These fields are used to populate the Open Graph and Twitter Card tags that social platforms use to generate link previews, and any text you put in them will appear in the preview — including the placeholder text itself, e.g. {clearbit.name} instead of the relevant company name.
• For Marketing and Sales Streams, we recommend enabling the Banner+Logo template under the Stream's Appearance tab, as this will allow you to use the Swap Logo setting. If you select this template, you should also enable the Hide Stream Title option and specify a Banner Title (also under the Appearance tab). There are two benefits to doing this:
  • If the Remove Logos When No Match Found option is turned on and no logo matches are found, the Banner Title will be shown on the banner instead (rather than an empty banner image).
  • If you intend to share the Stream on social media, you can put a placeholder in the Banner Title field (as this isn't shown in the social media preview), but not in the regular Stream Title field (which is shown on social media). In other words, this allows you to personalize the title that a visitor to the Stream sees, without the placeholder text appearing when the same Stream is shared on a social media platform.
• For all Streams and Items that you don't plan to share on social media, but which you expect to be indexed by Google, we recommend using the SEO Title and SEO Description fields. These allow you to specify alternative titles and descriptions for your Streams and Items when they appear on Google search result pages. You can use these fields to ensure that any placeholders you put in a Stream's or Item's title/description do not appear when that Stream or Item appears on Google.

 

Troubleshooting

If you experience problems with this app's functionality, this may be due to corrupted data. To resolve the issue, try clearing your browser's cache (or try using the app in Incognito Mode to see if that resolves the issue).

 

For developers

Because this app manipulates a large portion of Stream and Item pages, a race condition can occur, which can cause other JavaScript custom code running on the same page to malfunction. 

If your JS code performs other manipulations on pages where this app is active, you should ensure it runs after the app to avoid problems. To help you do this, a callback function is built into the app that will be called once the app has finished executing its own code.

To leverage the callback function, create a function named ufPersonalizerCallback in your own custom code and place your JS inside it. For example:

<script>
var ufPersonalizerCallback = function(){
 /** Your JS **/
};
</script>