Use a JavaScript Event as the Goal in an Experiment

Overview

This guide explains how to use a JavaScript event as the goal for an experiment in Bloomreach Content by registering a conversion through a dummy page.

When to Use

Use this approach when you want to define a goal for an experiment based on a JavaScript event—such as a click or scroll—rather than a page visit. This method is also applicable when the target page's URL is defined with wildcards in the sitemap, which prevents direct use as a goal.

Background

In Bloomreach Content experiments, a goal typically represents a visitor reaching a specific page after viewing the experiment page. This is tracked as a conversion. The goal page must have a URL explicitly defined in the sitemap configuration and cannot use wildcard sitemap items (_any_ or _default_).

Some scenarios require goals that do not fit this model. For example:

• You want to track conversions based on a user action (such as clicking a banner or scrolling) on the current page.
• The target page uses a wildcard URL in the sitemap, making it ineligible as a goal.

In these cases, you can use JavaScript to detect the event, but the platform does not natively support registering such events as conversions. To work around this, you can create a dummy page and trigger a background request to it when the event occurs. This request registers the conversion.

Implementation Steps

Prerequisites

• A Bloomreach Content project created from the Maven archetype and converted to an enterprise project.
• The Events and Banner Carousel features added.
• The Relevance Module added.

1. Create Banner Documents

1. Log in to the CMS as an administrator.
2. Open the Content application.
3. Navigate to myproject > banners.
4. Create a banner document:
   • Select an image.
   • Link it to an Event document in myproject > events.
5. Create a second banner document:
   • Select a different image.
   • Link it to the same Event document.
6. Publish both banner documents.

2. Add Banner Component to Homepage and Configure Variants

1. Open the Experience manager and select the 'My Hippo Project' channel.
2. Switch to 'Edit' mode.
3. Add the Banner component to a container on the homepage.
4. In the Banner component configuration, select the first banner document in the Document field.
5. Create a variant by clicking '+ Copy variant'. The variant will be named 'Default-B'.
6. In 'Default-B', select the second banner document.
7. Save the configuration.

At this stage, you cannot use the event detail page as a goal due to its wildcard URL. You will use a dummy page and a JavaScript event instead.

3. Create a Dummy Page

The dummy page serves only to register conversions and does not need to render content.

1. Create a Freemarker template onclick.ftl at:

   myproject/repository-data/webfiles/src/main/resources/site/freemarker/myproject/onclick.ftl

   <html/>
   copy

2. Register the onclick template in the delivery tier configuration using the Console:

   /hst:hst/hst:configurations/myproject/hst:templates:
     /onclick:
       jcr:primaryType: hst:template​
       hst:renderpath: webfile:/freemarker/myproject/onclick.ftl
   copy

3. Configure a page onclick that uses the template:

   /hst:hst/hst:configurations/myproject/hst:pages:
     /onclick:
       jcr:primaryType: hst:component
       hst:template: onclick
   copy

4. Add a sitemap item onclick that renders the page and defines a refId:

   /hst:hst/hst:configurations/myproject/hst:sitemap:
     /onclick:
       jcr:primaryType: hst:sitemapitem
       hst:componentconfigurationid: hst:pages/onclick
       hst:refId: onclick
   copy

4. Modify the Banner Template

Update the Banner component's template to trigger a JavaScript function on image click. This function sends a background request to the dummy page to register the conversion, then redirects the user to the actual event page.

Edit essentials-banner.ftl at:

myproject/repository-data/webfiles/src/main/resources/site/freemarker/hstdefault/essentials-banner.ftl

<#include "../include/imports.ftl">

<#-- @ftlvariable name="document" type="org.example.beans.Banner" -->

<@hst.link var="onClickLink" siteMapItemRefId="onclick"/>
<@hst.link var="link" hippobean=document.link />

<@hst.headContribution category="htmlBodyEnd">
    <script type="text/javascript" src="<@hst.webfile path="/js/jquery-2.1.0.min.js"/>"></script>
</@hst.headContribution>
    
<@hst.headContribution category="htmlBodyEnd">
    <script>
      function onclick() {
      $.get( "${onClickLink}", function() {
        window.location = "${link}";
      });    
      }
    </script>
</@hst.headContribution>

<#if document??>
  <div>
    <a href="javascript:onclick();">
      <img src="<@hst.link hippobean=document.image />" alt="${document.title?html}"/>
    </a>
  </div>
<#elseif editMode>
  <img src="<@hst.link path='/images/essentials/catalog-component-icons/banner.png'/>"> Click to edit Banner
</#if>
copy

5. Create a Goal

1. In the CMS, open the Content audiences application.
2. Select the Goals tab.
3. Add a new goal named "OnClick".
4. In the Channel dropdown, select "My Hippo Project".
5. In the Page dropdown, select "/onclick" (the dummy page).
6. Save the goal.

6. Set Up an Experiment

1. Open the Experience manager application and select the "My Project" channel.
2. Switch to "Edit" mode.
3. Select the Banner component on the homepage.
4. Select the "Default-B" variant.
5. In the Goal field, select the "OnClick" goal.
6. Save the component and publish the channel to start the experiment.

Verification

• Click the banner on the homepage.
• Confirm that the background request to the dummy page is made and that the user is redirected to the event detail page.
• In the reporting interface, verify that conversions are tracked for the experiment.

Considerations

This method is a workaround for a feature not currently supported natively. It requires developer involvement to create a dummy page and modify the component template. Use this approach when you need to track conversions based on JavaScript events rather than explicit page visits.