Get Started with Hushly's Web Personalization

Modified on Wed, 19 Jun at 9:28 PM

If you wish to make basic changes to your existing Web Pages or to increase traffic by targeting certain visitors with Custom Pages, then Web Personalization is the solution.

Hushly's Web Personalization is a lightweight tool that allows you to personalize basic elements on an existing web page based on the Segment the visitor belongs to. By building Web Experiences, you have the ability to change specific HTML elements (Example: Headlines, Hero images, CTAs, logos, images, etc.).


Overview

The following steps provide an overview of how to personalize a Web Experience.

  1. Setting the Web Experience Tag.
  2. Creating a Segment.
  3. Creating a Web Experience. 
  4. Personalizing a Variation. 
  5. Publishing a Variation. 
  6. Adding a Conversion.

Step 1 - Setting the Web Experience Tag

The Web Experience Tag is a universal tag for all Hushly Web Experiences. 

To add the Web Experience Tag on EVERY PAGE you wish to personalize, follow the steps below:

  1. Click Setup > Hushly Code and copy the Web Experiences Tag. Paste it into the <head> section of the Web Page you want to personalize. 


    Note: Customers can express their consent in two ways: opt-out or opt-in,  click here to know more.   


Step 2 - Creating a Segment

Segments are a set of rules derived from Hushly Data and Third-Party Data.


  • Hushly Data includes the Device Type (Desktop, Tablet, Mobile) the Visitor is using, URL, URL Path, Referral URL, UTM Parameters, and Country.

  • Third-Party Data includes data from vendors such as 6Sense, Bombora, DemandBase, ZoomInfo, TreasureData, and Rollworks, including Demographic & Firmographic, and Intent Data.


When a person visits a Web Page configured with a Web Experience Tag, Hushly recognizes the Segments the Visitor belongs to and shows the relevant content.

To define one or more Segments and associate them with a Web Experience, follow the below steps:

  1. From the Left Nav Menu, click Segments. 

  2. On the Segments page, click Add to add a new segment. 


  3. On the Add Segments Details Page, enter a Name for the Segment Rule.

  4. Add a Description (Optional). This is used for internal purposes.

  5. Add Rules. For example, the Page URL - contains - www.hushly.com

  6. Click SaveFor more information about adding Segments click here. 


Step 3 - Creating a Web Experience

A Web Experience is associated with a Page URL and is configured for personalization using one or more

Segments. To create a Web Experience, follow the steps below:

  1. In the Left Nav Menu, click Web Personalization > Web Experience and Click New Web Experience.               
  2. In the Add Web Experience pop-up window, enter the Name, Description, Segments, and the Editor Page URL. The Editor Page is where you wish to create your Web Experience. Note: You can associate one or more newly created or existing Segments to a Web Experience.

  3. Click Save. The Web Experience is created and displayed on the Web Experience Details Page.

Step 4 - Personalizing the Experience

To personalize an Experience, go to the Variation details page and follow the steps below:


Note:  A Segment contains the following:

  • Control:  Control is a page where no personalization is presented to the Visitor.

  • Variation(s): Variations are web pages where personalization is presented to the Visitor.


Note: To learn more about traffic distribution, click here


  1. Click the Variation you want to edit.   
  2. The Variation Editor Page displays the Preview Panel. 
       
  3. To personalize the Variation, select an element in the Preview Panel. Content and Style can be set in the Personalization Panel.

    Important: Click Save after editing each Element.
    • Content - Click on the Content you wish to change in the Preview Panel. From the Personalization Panel, you can change the text in the Content section and modify styles of the text in the Style section.
         
    • CTA - Click on the CTA in the Preview Panel to modify the text in the Content section and the element style in the Style section.
         
    • Hero / Banner Image - Click on the banner to change the source code in the Personalization Panel.
                   
    • Images - Click on the image in the Preview Panel, and choose an image from the Image library or add the image address in the Source field in the Personalization Panel. 
         
    • Social Links - Click on the social links in the Preview Panel, you can modify the Image or the Source in the Personalization Panel.


Step 5 - Publishing the Variation

  • Click Publish, to view the Web Experience at run time.

     

    Note: The Variation Publish pop-up window is displayed. By default the  Distribution mode - Equal is selected, however, you can change the visitor traffic distribution mode to Custom and then click Publish.



Step 6 - Adding a Conversion

Conversions record specific activities performed by web visitors. There are two types of conversions.

  • Page URL Conversion: A conversion is recorded when a visitor visits a page URL (normally used when a web visitor visits a thank you page URL after completing a web form.

  • Page Event Conversion: A conversion is recorded when users perform specific actions on a webpage.


Important: For either of the above conversion types the Web Experience Tag should be present on the page the conversion is taking place.


For either of the above conversion types, the conversion can happen on a different web page than for which the web experience is configured. To add the above conversions, follow the below steps:

  1. Click New Conversions.   
  2. Conversions can be added using the following Types: Page Visit and Event.


    • Page Visit - Enter the Name, Description, the URLs and click Save.     
    • Event - Enter the Name and the Description. Click Save.
  3. The created conversions are displayed on the Conversions detail page.


Runtime

When the page is accessed at the runtime, the pages are viewed based on the variation traffic distribution at publish.

  • A Visitor who views the Control Type Page 
  • A Visitor who views the Variation1 Experiment Type Page.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article