How to create an Experience with Web Personalization

This article will show you how to create personalized website experiences using the Web Personalization feature.

Take note

• Web personalization uses Site Tracking. You'll need to whitelist your webpage URL in order to use this feature. You'll also need to ensure that the "Web Personalization" box is checked on the Tracking page in your account
• Site tracking code must appear in the header of your webpage
• You will be able to edit the following elements for draft Experiences: text, images, button text, link redirects
• You will not be able to format the font, color, or placement of the text
• Images must be stored in a an image hosting platform

How to create an Experience

Web Personalization lets you create up to three different versions of a webpage then display them to contacts based on tags when they visit your site. These versions of your webpage are called Experiences.

To create an experience:

1. Click "Site" (Globe icon) in the left menu.

2. If you don't yet have an Experience created, the "Create an Experience" modal will open for you.

If you already have a draft Experience in your account, click the "Create an Experience" button.

3. A "Select your Page" modal will appear.

• Click the dropdown field
• Click the URL you want to create an experience for 
• Click the "Start Personalizing" button
•  

 

If you wish to personalize a new domain, click the "+ Add a New Page" option and enter the page you want to personalize. Then click the "Start Personalizing" button.

• We will whitelist this URL for you automatically
• We will enable site tracking and web personalization for you
• You must add the Site tracking Javascript code to the header of your page 

4. The Experience builder will load. Click either one of the "Personalize this page" options listed on the Experience builder.

5. An "Add a New Version" modal will open and the segment builder will appear.

• Click the "Search a value" box
• Click the tag you want to use in this segment
• Click the "Continue" button

Contacts who have this tag will see this Experience once it's published.

 

6. The "Personalized Page" tab will display your web page using an iframe. You can edit text, images, links, and button text.

• Use your mouse to hover over any element on the page
• Click the element you want to edit 

The "Element Editor" will appear on the right.

 

7. To use different text on the page, type it into the "Typography" box. Then click the "Save Changes" button.

 

8. To use a different image, paste the URL into the Image Source URL field. Supported file formats for images include: JPG, JPEG, PNG, SVG, GIF, or WEBP.  

Then click the "Save Changes" button. 

 

Changed elements will be highlighted with green dashes.

 

9. Redirect visitors to a different web page or website when they click a button on your page.

• This can be done with any link that already exists on the page you're personalizing
• You cannot embed new links to your page through the Web Personalization tool

To redirect page visitors to a different page or website, click the element that contains the link you would like to redirect. The Element Editor will open on the right. Type the link destination into the field provided.

If you are redirecting visitors to a new domain, you must use the full url, including https:// . We will not direct visitors to non-secure domains.

10. When you're ready make the Experience live, click the "Publish" button.