Skip to main content

Web personalizations

Updated over 2 weeks ago

Overview

Web personalizations allow you to deliver targeted content to visitors to your site using a simple JavaScript snippet. This enables a fast setup for marketers without relying on engineers to create the required variants.

Client-side approach

Category

Description

Overview

Uses JavaScript as the method of testing and personalizing site content. Therefore, all dynamic action is taken client-side, from the browser.

Where does content get changed?

On the client-side

Advantages

- Easy and fast to make changes

- Easy for business stakeholders to use
- Quicker implementation

Disadvantages

- A minor increase in page footprint and load time

- Less developer control
- Doesn’t integrate well with IT/web deployment frameworks

Examples

- Identifies one or more elements on the page via DOM selectors, then executes JavaScript code to modify such element(s). Examples: hide, remove, move, duplicate, change attributes, change CSS styling, and so on
- Identifies one or more elements on the page via DOM selectors, then executes JavaScript code to replace the element(s) with new content
- Identifies one or more elements on the page via DOM selectors, then executes JavaScript code to insert new content before or after the element(s)
- Injects global CSS styles onto the page, changing the styling of elements on the page

Key terms

  • Personalization is a set of Experiences organized around a single goal/website change strategy.

  • Web personalization is a subtype of personalization that refers to how the content on your website is changed. Web personalization uses JavaScript to test and personalize site content. Therefore, all dynamic action is taken from the client's side of the browser.

  • Variant is a set of website changes applied to a selected audience within personalization.

  • Control is the percentage of whole personalization traffic that will see the original website variant.

Creating a personalization

To create a personalization, go to the Experiences section -> Create experience -> Web

Enter the target page URL

Select the Target page - URL where the personalization will be served by default. This will be your starting page, where you will create your first variant.

After creation, you should toggle a "Personalization" switch

Create variant changes

When you click on the variant "Edit" button, you will be redirected to your target page, where you can set up the variant you want to personalize.

For a detailed guide on using the visual editor, visit Using the visual editor

Once you are done with the changes, click “Publish” to proceed.

Configure variant settings

You can configure settings for all variants created. Click “Configure” to access the settings window.

Audience

Configure who will see the variant. You can select from events, segments, and attributes to refine your targeting criteria.

🚧 Important

Selecting the targeting conditions is mandatory to start the personalization. Without targeting conditions defined, the variants will not be displayed.

Display

Target URL - Set up the rules on which pages the variant should be displayed. Ensure that you use the correct URL-matching conditions.:

  • URL matches - the variant will only load if it matches the exact URL parameters

  • URL contains - the variant will be displayed if a specified parameter exists within the URL that the user is viewing (for example, "product" within the full URL https://demo.intempt.com/products/a-line-mini-dress-blue).

  • URL starts with - only consider the start of the page URL. This is useful if you want to target pages nested within a specific category, like https://demo.intempt.com/collections/ -> display on all collection pages within the site.

  • URL ends with - only consider the end parameters of the page URL. This is useful if you have a specific UTM parameter to target.

Display - how frequently the variant will be displayed.

  • Set "Always" if you want the variant displayed on each page load (if the user matches other conditions)

  • Use "Once" to only allow the variant to be displayed for the user once per lifetime.

Target devices - define filters for devices that can render the variant. Configuration depends on whether you want different variants for mobile vs desktop users.

Schedule

Show variant on a specific timeframe - if enabled, the variant will be displayed within the indicated date range.

Display at a specific time window - select which days of the week and/or hours of the day the variant should be displayed. This is useful if you want the variant to run only on specific days or times of the day (e.g., Happy Hour sale).

Configure conversion metrics

Metrics are conversion goals that allow you to track your personalization performance across all variants. You can select multiple metrics per personalization, but at least one metric is required to create the personalization.

Note that you can only have one Primary and multiple Secondary metrics when selecting metrics.

The primary/secondary metric dropdown will allow you to access all events created in your project.

After selecting metrics, you must configure how they will be used to evaluate personalization performance.

  • If an event is triggered. Intempt calculated how often the event occurred when the variant was served.

  • Value of an event property. Intempt calculates the value of an event property that you select.

For example, in the scenario above, Intempt would display the number of revenue generated (amount field in purchase event) to those customers serving the variant.

You can select any property within the event configuration and possible aggregation types:

  • First value

  • Last value

  • Sum

  • Average

  • Maximum value

  • Minimum value

Set up control size

Control size will allow you to set a percentage of how many users would see the original, without a personalized variant. This setting is configured at the personalization level and applied to all variants with the same configuration.

We recommend a 5% control to measure your personalization’s impact.

Managing personalizations

You can create multiple variants within the personalization on the configuration tab.

Clicking on the “Add new variant” button will open the web editor to configure a new variant.

Editing the content of the variant

Click the “Edit” button next to the variant name to access the visual editor and apply the changes to the already-created variants. You will be redirected to the visual editor to edit the variant UI.

Editing the settings of the variant

Click on the “Configure” button to access the variant settings.

You will see the same variant configuration pop-up as in the previous section.


Starting the personalization

Once you set up all the variants, you can start the personalization by clicking “Start.”

After the personalization has started, you can pause it at any time. After that, all variants will be stopped, irrespective of their targeting and display conditions.

You can create new variants at any personalization status (draft, running, or paused). Still, we recommend adding new variants when the personalization is paused so you don’t accidentally serve content to the wrong audiences in case of misconfiguration.

Personalization results

For a complete overview of how personalization performance and metrics are evaluated, refer to Personalizations analytics.

Troubleshooting

Before starting your first Web personalization, please ensure you follow these recommendations so the content is rendered properly:

  • Don't apply changes to the same element or section on your website in more than one personalization. This can create a content rendering conflict that will cause the personalization to fail.

  • Create variant targeting, considering that only one variant will be served within any given personalization. This applies to situations when a user matches multiple variants within the personalization. If there is a tie, variants with a higher priority will be served.

Did this answer your question?