Personalizing website content is one of the most popular Projects in Profile Cloud. There are different ways to change content with Profile Cloud:


  1. Using APSIS Personalization App. In this case, Profile Cloud changes the content on the website through a process called DOM manipulation. It works for any website and allows you to use a WYSIWYG (what you see is what you get) tool to pick the area to change.
  2. Using a Content Management System (CMS) integration. In this case, Profile Cloud simply tells the CMS what segment a Profile is in, allowing the CMS to change the content.
  3.  

This article will describe of how to change content using the first option i.e. using APSIS Personalization App.


Prerequisites  

  • APSIS Personalization app installed in your account. Click here for more info.
  • The on-site widget bookmarklet is installed on your browser. Click here for more info.
  • APSIS javascript implemented on the website. Click here for more info.

The on-site personalization is executed by an event in the web data collection app. Go to web data collection and create a new event definition.

 (Explanation of each field below the screenshot)


  1. Event selection - dropdown: Select an already existing event to trigger the personalization or create a new event for triggering the event. As a personalization event might be active only for a short period of time, it is recommended to create new event definition in order to avoid changing existing events.
  2. Name: Name of the event. It is recommended to use a descriptive name in order for all users to understand what the purpose of the event is and to keep track of all the events.
  3. ID: An ID is generated by APSIS Profile Cloud. No action is needed from the user. This ID can be used by developers to define the event on a technical level.
  4. Category: Add the event to a category or create a new category in order to keep a structure of your organization events. It is optional. It is however recommended to create a category structure for keeping track of all the events.
  5. Description: Add a description of the event. This description will appear in the event to inform the purpose of the event. It is recommended to add a description but optional. The functionality and purpose of the event and perhaps an end date if the event is running during a specific period of time.
  6. Save to profile: Decide whether this event is to be saved in APSIS Profile Cloud. In some cases, it might not be relevant to save this information to APSIS Profile Cloud. In most cases, it is valuable to save to APSIS Profile Cloud for example if it is intended to use APSIS Profile Cloud segments or other profile info for the event.

 

In the event editor the “personalization app” is available under a category called “Tags”


Add the element to the editor by clicking on it. Now double click on it again. By clicking on “GO” your browser will refer you to the page stated in the field. Add the url where the personalization will be taken place or click on “GO” and navigate to the intended area to personalize.

 

When you are on the page where the element that is going to be personalized, click on the bookmarklet “On-site widget”. Click here for more info on how to add the “on-site widget”.


The onsite widget will now appear on your screen.


When the onsite widget is visible on the page you will now be able to select an element on the page with the cursor. The element/content will show up in the onsite widget as below screenshot.


In the drop-down list, upper right corner of the onsite widget, you will now have to define how you want to change the selected element. The options depend on what type of element that is selected.

 

The most used options are “change image” and “HTML editor”

  1. Change image: Replace the selected image with another image by uploading the new image to profile cloud server.
    When an element has been selected, simply click on “upload file” and select the image you want to replace or add an image URL directly into the onsite widget.


  2. HTML Editor: Change content by HTML. This option is used to create more dynamic personalization as it is possible to add dynamic variables into the HTML editor and depending on the profile, point to different content. Read more on how to add dynamic content here.
    When an element on the page has been selected and the HTML editor is selected, change the HTML. Change for example the image url as in the below screenshot.


  3. WYSIWYG Editor: Change content on the site by editing the selected element.

  4. Remove Element: Remove the element completely from the page.

When the wanted changes have been done, click “Save” and go back to the event definition page. Click on “OK” on the personalization tag


At this point, the content change has been defined. A trigger has to be added. For personalization events the trigger “Page init” should always be used as this will trigger while the page is loading and not after which is necessary in order to avoid latency in the change of the content.


You can now test the content change by going to the page and click on the bookmarklet “dev mode”.


Define the segment you want to apply the personalization on by clicking on “add segment”. All created segments will be selectable from the list that appears.


Click Save and test it with the “dev mode” bookmarklet.


The last step is to deploy it on production.  Read more on how to deploy here.