Website personalization

Summary:

In this article, you’ll learn:

How to create a new personalization and use the Webpage Personalization tool to personalize your website pages.
How to add, remove and edit content on the page for personalization.
How to work with different available elements in the Webpage Personalization tool.
How to save, edit, rename and remove a personalization.
How to assign a personalization to an automation rule.
How to locate the rule connected to your personalization.

Webpage Personalization Tool:

Webpage Personalization helps you show everyone their own version of your website based on their stage, attributes and preferences.
You can create and manage each webpage personalization in the Website Personalizations page inside the ConvesioConvert app.

Note: Modifying the page content through the Webpage Personalization tool does not affect the original content of the page. The personalizer creates a copy of the page in the ConvesioConvert dashboard and applies your changes only to that instance.

Creating a new personalization:

In the personalization page, click on the New Personalization button and select a page you’d like to personalize. Once a page is selected from the menu, you’ll be taken to the Webpage Personalization environment where you can add, edit and hide content on your webpage as you like.

Selecting/deselecting content on your webpage:

Hover over different elements on the page to see the colored border around them.

To select an element, simply click on it. The selected element will appear as selected with a thicker border.

Note: Webpage Personalization follows the same wrapper structure as the original page. So you might need to play around with the cursor to locate the right wrapper that includes the element(s) you want to select.

Adding content to your webpage:

Select an element on the page where you want to add content.
Click on the + icon to open the elements list, then select an element.

Note: The following elements can be used to be inserted in a personalized page:

Text
Blog
Product
Button
Image
Video
Social

Removing content from your webpage:

To delete an item from the page, select the item, then click on the Trash icon.

Note: As mentioned at the beginning of the article, modifying the page content through the Webpage Personalization tool does not affect the original content of the page. The personalizer creates a copy of the page in the ConvesioConvert dashboard and applies your changes only to that instance.

Editing existing text on your webpage:

In order to edit existing text on the page, first select it and then double click on it. You can also directly double click on the text to go to edit mode.
Once you are done editing the text, click on the icon to approve the edits.

Note: While in editing mode, you won’t be able to edit any items other than the selected item on the page. You need to commit or cancel your changes before editing other content on the page.

Editing the content added by the Webpage Personalization tool:

To edit the content or customize the appearance of an added element, click on it to select it, then click on the Gear icon to open the element’s settings panel. You can also double click on an element to open its settings panel.

Elements in the Webpage Personalization tool:

The following elements are available to be added to your personalized page:

Blog
Product
Button
Image
Video
Social
Text

Below, the settings and customization options for each element is explained:

Text element:

Use the Text element to insert texts to your personalized page. The following options are available for further customization:

Use the controls to adjust the font size of the text.
Use typography controls to apply the bold or italic style.
Use the color picker to change the text color.
Click on the link icon to apply a hyperlink to the text.
Use the alignment options to align the text left, center or right.
Use to insert dynamic content inside the text. Some example options are:
- Username
- First Name
- Last Name
- Daytime
- utm_source
- utm_medium
- utm_campaign
- utm_term
- utm_content

Note: Dynamic tags such as Username, First Name, Last Name appear differently for each user.

Note: The Daytime dynamic tag will be replaced with a text according to the time of the day. For example,

From 00:00 until 11:59 the text will be Good morning.
From 12:00 until 16:59 the text will be Good afternoon.
From 17:00 until 23:59 the text will be Good evening.

Note: The UTM dynamic tags will extract the UTM contents of a URL when a user enters your site. The UTM data will then be available throughout the session. As an example, when a user enters your site through the following URL: https://yoursite.com/?utm_source=google the google word will be stored as the utm_source throughout the session of that user. This means that if you insert the utm_source dynamic tag in any page through the Webpage Personalization tool, the tag will be replaced with the google word. Of course the text replacement will only occur if the personalization is associated with an automation rule. Learn more about automation rules.

Blog element:

Use the Blog element to display your blog posts in a personalized page. The following options are available for further customization of the Blog element:

The type of the blog loop:
- Recent shows the most recent blog posts.
- Related shows the related blog posts according to each user’s post visits.
- Popular shows the most popular blog posts of your site.
Quantity: To show the number of posts to display in the blog loop (up to 6).
Columns: Define the number of columns (up to 3).
Image: Show/hide the image of the post.
Button: Show/hide the View Post button.
Title, Button sections: Customize the formatting and appearance of the title and the View Post button.

Note: The related blog posts are dynamic content, meaning they appear differently for each individual user. Additionally, the content of this element appears as empty for the users who have not visited any blog posts.

Product element:

Use the Product element to display products in a personalized page. The following options are available for further customization of the Product element:

The type of the product loop:
- Recent shows the most recent products.
- Related shows the products related to the previous purchases of a user.. You can toggle between two options to show related products based on the last purchase or all purchases.
- Popular shows the most popular blog posts.
Quantity: Show the number of products to display in the product loop (up to 6).
Columns: Define the number of columns (up to 3).
Image, Description, Price: Show/hide the image, description and price of the products.
Title, Description, Price, Button sections: Customize the formatting and appearance of the title, description, price and the View Product button.

Note: The related products are dynamic content; meaning they appear differently for each individual user. Additionally, the content of this element appears as empty for the users who have not purchased any products.

Button element:

Use the Button element to insert a button with a custom link on your pages. The following options are available for further customization of the Button element:

The label.
The label’s font.
Use controls to adjust the font size of the label.
Use the color pickers to change the text color, background color and the border color of the button. These options are customizable for the hover style as well.
Click on the link icon to apply a hyperlink to the button.
Use the alignment options to align the button left, center or right.

Image element:

Use the Image element to insert an image to your pages. Click on the Gear settings button to select an image from the media library.

Video element:

Use the Video element to insert a video from YouTube or Vimeo on your page.Enter the video URL in the text field and click on the Add button to insert the video.

Use the Social element to display social icons on your page.

Enter the URL of your social media accounts.
Click on the icons to show/hide each network.

Saving your personalization:

Once you’re done with your personalization, click on the Save & Exit button, which will take you back to the main page of the Webpage Personalization tool where your personalizations are listed.

Editing/removing/renaming your personalization:

From the Webpage Personalization tool’s main page, roll over your personalization’s thumbnail, then select Edit or Remove

In order to rename a personalization, select the Edit option, then in editing mode, enter the new personalization name in the upper left section.

Automating your personalization:

From the left sidebar, go to Automations and create a trigger that you want to create a rule for.
Add an action and choose Personalize Web Page.
Edit your web page.
Click Save.