Overview:

A solution for real-time, dynamic personalization of a website’s user experience. By leveraging session variables in a personalization sitemap, we can track the time a user spends on specific pages during a single session. This allows us to identify their primary interest based on the page they spent the most time on. The collected data is then used to dynamically replace a static element, such as a homepage carousel, with an last visited image relevant to that page. This provides a more personalized experience by showing content the user is genuinely interested in, without needing to store this real-time data in a personalization.

Use Case

When a user shows a strong interest in a specific page by spending more time on it, we can personalize their experience. For instance, if a user spends over 30 seconds on a product page, the next time they visit the homepage, the main carousel will be replaced with a static image of that product. This makes the homepage more relevant by highlighting what the user is most interested in.
The challenge is to capture the exact time a user spends on a page, for that we cannot store the sessions in the Web Template as it was not capturing the time a user spends on a particular web page.

Solution Approach

To solve this, we’ll build a solution in the sitemap to capture real-time user behavior. We’ll track the time a user spends on different pages and store it in session variables on the browser until it is not exited. By comparing the time spent on the current page versus the previous one, we can determine which page held their attention the longest. This data then allows us to personalize the user’s experience based on their interests.

Steps

1. Identify the pages on the visit of which we need to create the session variables.
2. Open the Personalisation tool

   

3. 1. Go to Site-wide javascript: Sitemap
   2. In the sitemap, create a function to capture the visit duration of the pages.
   3. Fetch the time spent, page URL and image URL, of the visited pages.
   4. Store these values in the session variables – currentPageTime, currentPageUrl, currentImageUrl, previousPageTime, previousPageUrl, previousImageUrl, maxTimeSpent, maxTimeSpentUrl, maxTimeSpentImageUrl.
   5. Save the Sitemap

   

4. Go to Web and Create a Web Template (to display image as Banner)

   

5. In the Web Template, access the session variable values from the browser and display it in the required content block of the page where we need to personalise the image (i.e, carousel area of the home page)

   

6. To review, go to the website and spend some time on the pages and inspect the developer tools to see the created session variables and their values.

   

7. When a user comes back to the home page, the carousel is replaced with a static image mentioned in the session variable maxTimeSpentImageUrl.

   

Conclusion

By using session variables within the sitemap, we’ve successfully created a solution that provides real-time, personalized content based on a user’s browsing behavior within a single session. This approach get around the limitations of a standard personalization tool that can’t handle real-time data to map with catalog, and allows us to immediately act on user interest. The process involves capturing and storing real-time data like page visit duration, URL, and associated images in session variables. This data is then used to dynamically update content, such as replacing a homepage carousel with a static image of the most-viewed product. This solution is an effective, non-intrusive way to enhance the user experience, leading to higher engagement and a more relevant browsing journey.