LimeSpot Content Personalization modules update certain parts of your online store for different visitors according to the Audience Segments they fall into.
There are currently 3 different types of content personalization that could be applied to the store according to the Audience Segments:
Personalized Images
Personalized HTMLs
Curated Collections
In some advanced use-cases, there might be a need to take an extra action after the content personalization has taken place in order to deliver a certain user experience or interaction.
When the content has been updated successfully according to the Audience Segment, LimeSpot Storefront library triggers JavaScript events to allow custom handling.
Each one of these events includes certain details to provide all the necessary information for implementing custom use-cases. While each event has details specific to the type of content personalization action (all of which are self-explanatory according to their names), here are the list of parameters commonly included in more than one of those events:
userSegmentGuid: unique identifier of the Audience Segment the visitor has fallen into, which triggered the personalization event.campaignGuid: unique identifier of the campaign that was activated for the content personalization.campaignEntryGuid: unique identifier of the specific entry inside the campaign that was selected for the audience according to the personalization rules.
Here are the events that are triggered for each type of personalized content:
limespot:personalizedImageRender: event is triggered after a Personalized Image is applied to the webpage.campaignEntryGuidrepresents the Image item identifier rendered for this event. Here's an example of the details associated with this type of event:
{
userSegmentGuid: "bd55c860-cf48-464e-8286-0a7eff3d3556",
campaignGuid: "e2c22f77-a217-432b-ad71-adfb9e78c9fa",
campaignEntryGuid: "d35bbeaa-458e-4671-86b7-66863b2632c9",
containerElement: { li.flex-active-slide.ls-loaded DOM Object },
containerSelector: "LI.flex-active-slide",
largeImageElement: { img DOM Object },
largeImageSelector: "A.slide-link > IMG"
}
limespot:personalizedHtmlRender: event is triggered after a Personalized HTML content is applied to the webpage.campaignEntryGuidrepresents the HTML item identifier rendered for this event. Here's an example of the details associated with this type of event:
{
userSegmentGuid: "cb643b2c-75c6-41f5-8a4e-1f125f8d77f6",
campaignGuid: "b90bd313-5854-4945-9cb9-46eb834043eb",
campaignEntryGuid: "5814d65c-31be-4cec-8ded-f61977f2a73d",
containerElement: { div.rte.text-center.ls-loaded DOM Object },
containerSelector: "DIV.rte.text-center",
htmlElement: { p DOM Object },
htmlSelector: "DIV.rte.text-center > P:nth-child(1)",
}
limespot:curatedCollectionRender: event is triggered after a Curated Collection link is applied to the webpage.campaignEntryGuidrepresents the Curated Collection Variation identifier rendered for this event. Here's an example of the details associated with this type of event:
{
campaignGuid: "0c6eec75-c4f1-4f37-b52a-9436805a7ed0",
campaignEntryGuid: "91483545-781f-412c-8981-757500833ac3",
linkElements: [
{ a.site-nav__link.site-nav__linknodrop DOM Object }
]
}
Here is a sample code showing how to handle one of these events and making decisions according to the event details:
document.addEventListener('limespot:personalizedImageRender', (event) => {
var eventDetails = event.detail;
switch (eventDetails.campaignGuid) {
case "cb643b2c-75c6-41f5-8a4e-1f125f8d77f6":
alert('Campaign "AAAA" rendered onto the image.');
break;
case "e2c22f77-a217-432b-ad71-adfb9e78c9fa":
alert('Campaign "BBBB" rendered onto the image.');
break;
}
});