Use a Javascript Event as the Goal in an Experiment

Introduction

Goal

Use a Javascript event as the goal for an experiment by using a dummy page to register a conversion.

Background

In the context of an experiment, a goal is a visitor reaching a pre-determined page after viewing the page the experiment runs on. Reaching a goal is considered a conversion. The page defining the goal must have a URL explicitly defined in the sitemap configuration, without the use of wildcard sitemap items (_any_ or _default_).

There are use cases which require a goal that does not fit within the above definition and constraint.

One such use case is an experiment for which the goal is not a page at all, but rather some event happing while the visitor is viewing the current page on which the experiment is running. For example, scrolling to the bottom of the current page.

Another use case is an experiment for which the goal is a page with a URL configured using wildcards in the sitemap. A solution would be to consider the event of the user clicking on the link to that page as a conversion. This is technically the same as the first use case.

Although in both use cases, the events considered to be a conversion (click on an element, or scroll to a certain point) can be recognized and responded to using Javascript, technically these are not directly supported as a goal, and therefore not registered as a conversion.

To work around this limitation, a 'dummy' page can be created to be used as a goal. This dummy page is 'visited' by a background request if the Javascript event occurs, in order to register a conversion.

This page provides an example of this workaround.

Example

Use Case

This example is based on a Hippo project created from the Maven archetype using default settings, converted to an enterprise project, with the Events and Banner Carousel features added, and the Relevance Module added.

The use case is:

• You want to promote a certain event using a banner on the homepage of your website, linking to the event's detail page.
• You want to run an experiment to see which one of two banner images works best in leading visitors to the event's detail page.
• You can't use the event detail page as a goal because its URL is configured using wildcards in the sitemap.
• Instead, you define the goal as the user clicking on the banner.

Approach

You will configure a dummy template, a dummy page, and a dummy sitemap item to be used as the goal for the experiment.

You will add Javascript code to the Banner component's template which requests the dummy page's URL in the background whenever a user clicks on the banner image.

Implementation

Create Banner Documents

Log in to the CMS as admin, and open the Content application.

Browse to the folder myproject > banners.

Create a banner document. Select an image and link it to an Event document in myproject > events.

Create another banner document. Select a different image but link it to the same Event document.

Publish both banner documents.

Add Banner Component to Homepage and Configure Variants

Open the Experience manager and select the 'My Hippo Project' channel.

Switch to 'Edit' mode and add the Banner component to a container on the homepage.

In the Banner component's configuration, in the Document field, select the first banner document you created.

Create a variant by clicking on '+ Copy variant'. The variant will be called 'Default-B'.

In Default-B, select the second banner document you created.

Save the configuration.

In the current configuration, it is not possible to run an experiment to see which variant leads to the most conversions because there the banner link to an Event detail page, which can't be used as a goal.

Create a Dummy Page

The only purpose of the dummy page is to be used as a goal. It does not actually have to render any content.

Create a Freemarker template onclick.ftl at the following location in your project:

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

<html/>

Using the Console, add the onclick template to the delivery tier configuration:

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

Next, configure a page onclick, consisting of just one component, which uses the onclick template:

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

Finally, configure a sitemap item onclick which renders the onclick page. Also, define a refId so you can refer to the sitemap item from within a template:

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

Modify the Banner Template

The Banner component's template renders the image selected in the associated Banner document and links it directly to the selected Event document.

The template must be modified to instead call a Javascript function when the user clicks on the image. Within the Javascript function, the dummy page is requested in the background in order to register a conversion, before sending the user to the actual linked Event document.

Modify the essentials-banner.ftl Freemarker template as follows:

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>

Create a Goal

In the CMS, open the Content audiences application and select the Goals tab.

Add a new goal called "OnClick".

In the Channel dropdown, select "My Hippo Project".

In the Page dropdown, select "/onclick" (the dummy page you created).

Save the goal.

Set up an Experiment

Open the Experience manager application and select the "My Project" channel.

Switch to "Edit" mode and select the Banner component on the homepage.

Select the "Default-B" variant.

In the Goal field, select the "OnClick" goal.

Save the component and publish the channel to start the experiment.

Considerations

The method described on this page is a workaround for a currently unsupported feature. Although the workaround is technically sound and works well, its main disadvantage is the need for a developer to create a dummy page and modify a component template.