Website Personalization User Manual

Learn how to setup your Web Personalization campaigns.

Written by Jeffrey Ye Updated over a week ago

ListenLoop’s Website Personalization feature allows you to customize your website for each account. Our simple, self-serve workflow will guide you through the campaign creation process outlined below in video and text.

Step 1: Prepare Your Campaign

You will need to:

(1) add ListenLoop’s JavaScript code / pixel to your website;

(2) create a spreadsheet that has content for each account; and

(3) edit HTML elements on your website to identify what content you want to customize per account.

Add the ListenLoop JS Code / Pixel to your website.

Copy and paste the JavaScript tag as the first item into the <HEAD> of your website.This JavaScript code / pixel will enable website personalization and conversion tracking. Feel free to use Google Tag Manager or equivalent to accomplish this task.

N.b. You may complete this step at any time, but the Personalization Preview functionality will not work without adding the JS tag on your website. If you are preparing a Website Personalization campaign before signing-up for ListenLoop, you must sign-up at the Preview step of the workflow in order to generate your unique JavaScript tag.

Create a Spreadsheet with Custom Content per Account

ListenLoop uses CSV as the input for the website personalization campaigns because spreadsheets are easy to manipulate, using formulas for mass customization.

Review and download this sample CSV prepared for ListenLoop's own personalization campaign. You'll note how ListenLoop's team leveraged enrichment data from third-party vendors to make custom content in less than 60 min.

CSV Structure

Your CSV should include a column with company names or domains for each account. Preferably you provide a domain since they are unique identifiers, whereas company names can be ambiguous.

Additionally, you should provide 1 - 5 columns of custom content per account, like this:

The custom columns can be named anything you want. For example, the example CSV uses descriptive column names, like "ATF Msg", "Hero Title", "Start Trial Button" and so on.

Edit HTML Elements on your Website

Website Personalization uses ListenLoop's JavaScript code on your website to find prescribed HTML classes, such as "ll-custom-1", to identify the content you want to customize for a target account. For example, if you want to customize an <h1> element on your website, you can tag it like this:

<h1 class=”ll-custom-1”>Hello World</h1>You may add up to 5 custom classes to a webpage you want to personalize:

ll-custom-1

ll-custom-2

ll-custom-3

ll-custom-4

ll-custom-5

In the following steps, you will connect (aka "map") the CSV columns you prepared to the custom classes you added to your website.

Step 2: Setup Your Campaign

Begin by choosing a campaign type. This tutorial will assume that you're creating a "Web Personalization" campaign only, so click on the middle card.

Then click on "Upload CSV" to identify the target accounts and custom content you created:

Connect the classes you added to your website to the columns in your CSV spreadsheet. The image below shows the CSV column "ATF Msg" connected to the class "Custom 1" – referring to the class "ll-custom-1" on the website.

Click "Next" after connecting the classes and CSV content. On the following screen, you will review and confirm that ListenLoop parsed your data correctly. Here, you may spot edit account information, such as name, domain, or zip code, by clicking on the pencil icon.

Click "Next" in the bottom navigation bar to proceed.

Identify the URLs you Want to Personalize

In this step, you will identify the website URLs to be personalized. You must ensure the ListenLoop's JS code / pixel is present on each webpage.

First, input a name for the webpage to be personalized. That name will be a useful shorthand reference in reports. Second, input the URL of the page to be personalized. Finally, click the "Submit" button to save the personalization URL.

You may add as many Personalization URLs as you want in one campaign. Adding multiple URLs means you can personalize many pages with the same custom content, which is useful on templated landing pages that should be similarly customized.

Note, the URL field will ignore http:// and https:// protocols and trailing slashes (e.g., inputting “http://listenloop.com” will match "https://listenloop.com/" in a browser, and vice versa) when delivering personalized content.

Also the input URL will attempt an EXACT match unless wildcards * are used. For instance, if you want to personalize “http://www.listenloop.com” and “http://blog.listenloop.com” you may enter “http://*.listenloop.com/” to take advantage of the * wildcard in the subdomain.

Editing and Updating a Saved URL

Click on the pencil icon to edit the name and URL for an existing personalization URL.

Be sure to click on "Save" after making any changes. Separately, you may toggle the power icon to disable or enable personalization on a given URL.

Click on the "Next" button in the bottom navigation bar to continue.

Step 3: Preview Your Web Personalization Campaign

Now it's time to preview your personalization campaign on your website. For preview to work, you must:

(0) be signed-in to ListenLoop, so create an account if you haven't already;

(1) have the ListenLoop JavaScript Code / Pixel on the URL chosen for personalization; and

(2) have added one or more personalization classes on that URL (e.g., added class='ll-custom-1' to an HTML element)

If you do not have #1 or #2 above, you will see a reminder screen like this:

or this:

Previewing your content is not mandatory but highly recommended. At any point, you may click on the "Skip & Preview Later" button (see above) or the "Next" button in the bottom navigation bar.

Once you have completed steps #1 and #2 above, you will see a preview of your personalization campaign, like this:

In the example above, the Contact Us Form has personalization classes "ll-custom-4" and "ll-custom-5", which are mapped to custom content for a target account, DocuSign. The result is shown in the preview pane.

Re-sizing the Preview Screen

You may want to see how your personalization campaign looks on different devices. Click on the laptop, tablet, and mobile device icons to re-size the preview pane accordingly.

Editing Content and Previewing Other URLs

You may see a particular account's preview by using the Account Dropdown, or by clicking through different accounts with the left and right arrows.

If you want to edit the custom content for any account, click on the edit pencil to bring up the editor pane:

In the example above, you will note that ListenLoop accepts text or HTML as content. This is helpful to accommodate unique situations where an account name is too large to fit within a particular area. For instance, you can edit a long, overflowing company name by making it's font-size smaller using a span tag, like this:

Be sure to click on the "Update" button to save your changes and refresh the preview pane. Changes in the Edit pane will apply to each record individually, not all accounts. If you need to make bulk edits, please click "Back" and re-submit a revised CSV file.

If you are personalizing multiple URLs, you may click on the URL Dropdown or use the left and right arrows to preview other URLs.

After previewing and editing content as needed, click on the "Next" button to continue.

Step 4: Identify Conversion Events (Optional)

Optionally, you may setup conversion events to track whether your target accounts engaged in desired behavior. For instance, you may want to track whether an account submitted a "Contact Us" form.

To enable this feature, you must include the ListenLoop JS code / pixel on the conversion URL. Then add a Conversion Event to your campaign by inputting a name, conversion value in dollars, and conversion URL:

You may create as many conversion events as you want to record your campaign’s performance. This is useful when a wildcard is over-inclusive but you need to match on multiple URLs.

Updating Conversion Event

You may update any Conversion Events by clicking on the pencil icon. This allows you to change the Conversion Name, Value, and URL. Remember to click on the "Save" button to save your changes. This is useful if you are editing a campaign after it has been launched.

Click on the "Next" button to continue.

Step 5: Review and Launch the Campaign

In the final step, you will review your campaign parameters and click the "Launch" button.

Campaign Overview

In the table titled, "Campaign Overview", you can review target accounts, conversions, and software fees for a campaign. You may edit parameters using the edit pencil in each row.

In the "Web Personalization" table, you will see URLs and the number of custom elements to be personalized. If you want to edit these, click on the "Back" link in the bottom navigation bar.

Name Your Campaign

In the "Name Your Campaign" table, you will see an input field to name this campaign. ListenLoop names your campaign using the filename of CSV you uploaded by default.