Get Started with Hushly's Web Personalization

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.   
   

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; which can include 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. Click Setup > Segments and on the Segments Listing Page, click Add.    
2. On the Add Segments Details Page, enter a Segment Rule. As an example, we used "Hushly Web Experience", but you can name it anything you like.
   
   
3. Add a Description (Optional). This is used for internal purposes.
   
   
4. Add Rules. For example, Page URL - contains - www.hushly.com. 
   
   
5. Click Save. For 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. From 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 and the Personalization Panel.
      
3. To personalize the Variation Editor Page, 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 will 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 section 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 section, and choose an image from the Image library or add the image address in the Source field in the personalized panel. 
        

   • Social Links - Click on the social links in the preview section, you can modify the Image or the Source in 

     the personalized 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. They 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.