Getting started with the Innometrics on-site personalization app in profile cloud
Posted by Innometrics Profile Cloud 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:
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
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 "Mondify.com").
Click on “GO.”
Once the website has opened in the browser, navigate to the specific page that you want to personalize.
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”
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.
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”.
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.
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.