Getting started with the Innometrics on-site personalization app in profile cloud
Posted by on 15 Mar 2016 16:24

Personalizing website content is one of the most popular Projects in Profile Cloud.

There are different ways to change content with Profile Cloud:

  • Using the Innometrics 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.
  • 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.

This article will describe how to change content using the first option, using Innometrics Personalization App. 

1. Add the Personalization App to an Event rule
2. Use the "On-site widget" to define the content to change
3. Personalization App options
4. Define a Trigger
5. Define a segment to target the personalisation at a specific audience
6. Test the personalization in development mode and deploy


  • Install the Personalization app from the App Store in Profile Cloud.
  • The on-site widget bookmarklet is installed on your browser. Click here for more info.
  • Innometrics java script implemented on the website. Click here for more info.

1. Add the Personalization App to an Event rule

Go to the "Web Data Collection App" under the "Collect" menu. Create a new Event Definition or edit an existing one. 

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


Add the element to the editor by double clicking on it. Now double click on it again to open the On-site Personalization dialogue box (shown below). 

Add the url of the website you want to personalize (in the example above its "").

Click on “GO.”

Once the website has opened in the browser, navigate to the specific page that you want to personalize. 

2. Use the "On-site widget" to define the content to change.

Click on the bookmarklet called “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 be able to select an element on the page with the cursor. All page elements will be highlighted by a black box as you move your mouse. The element/content will show up in the onsite widget as below screenshot.


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

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

3. Personalization App options

a. Change image: Replace the selected image with another image by uploading the new image to Profile Cloud.

When 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.

b. HTML Editor: Change content by HTML. This option is used to create more dynamic personalization as it is possible to add dynamic variables in to 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.


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

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

When you have made the changes click “Save” and go back to the event definition page.

Click on “OK” on the personalization tag to save the personalization changes to the element you selected. 


At this point the content change has been defined. A trigger has to be added.

4. Define a Trigger

For personalization events the trigger “Page init” should always be used as this will trigger while the page is loading and not after. This is necessary in order to avoid latency in the change of the content (latency makes content 'blink' when loading the page). 

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

5. Define a segment to target the personalisation at a specific audience. 

Define the segment you want to apply the personalization to by clicking on “add segment”. All created segments will be available to select. 

Click Save to save the whole Event rule. 

6. Test the personalization in development mode and deploy

You can test your personalization in development mode. Go to your website that you are personalizing and click on the "dev mode" bookmarklet. Make sure that your behaviour will mean you are in the correct Segment to trigger the Personalization. 

Finally - deploy the rule to production. Read more on how to deploy here.

(0 vote(s))
Not helpful

Comments (0)