How to Configure Custom Goals and Trigger them by AJAX Call – Sitecore

Sitecore has out of the box capability to record customers’ behaviours throughout their journey across the channels. We can customise the way to capture customers’ behaviours by registering our own custom events, failure events, goals and outcomes and use them to create personalisation. This out of the box analytics capability is where Sitecore really excels compared to other CMS.

Goals are typically set to a page or an action that is defined as a milestone within the sales funnel. For example, getting customer to a selection page is a milestone in the sales funnel where the end goal is conversion. Getting customer to add an item to a card is another milestone that can be captured as a goal.

They can be used for profiling and personalising content. If the customer visits more pages related to electronic goods as opposed to kitchen utensils, we can categorise them and create personalised experience on the site accordingly.

Another use of goal is to set up AB testing. We can use goal to track say which version of the form triggered submission.

In fact the goal set up here will be used for the next post about setting up content tests (How to Set up Content Tests with Data Source)

In this post, we will create a custom goal that can be triggered on form submit event by AJAX when the customer clicks a form submit button. Here are the things we need to do.

  1. Create a new goal item and assign a value.
  2. Create a service class to register goal.
  3. Create an API endpoint that can be used by JavaScript to call AJAX.
  4. Create a page with a form.
  5. Test the solution.

Let’s get started.

Steps

(1) Create a new goal item and assign points

Go to the marketing control panel and add a new goal called SubscriptionFormSubmit. You can assign points that are associated with this goal. I added 11 points.

(2) Create a service class to register goal.

In the foundation project under Customer, I created the GoalTriggerService, which takes a goal item ID as an argument. This class can be used wherever you want to register a goal.

Make sure that you have your Tracker enabled. It is a good idea to add VisitorIdentification tag in the layout, too. Otherwise, Sitecore treats every visitor as a bot. Tracker is enabled by default, but you should check the config file just in case. See how this can be done here, Enabling tacking.

Here is the code to register goals.

(3) Create an API endpoint to trigger goal from front end

In Sitecore, we can define a custom route by adding an MVC route, which allows AJAX call to go around the Sitecore render pipeline. This involves creating route map and add some config file. It is a simple thing to do. If you need further information, you should check out the documentation, User MVC routing.

In the feature project called Subscription, first add RegisterHttpRoutes.cs in the root.

Now we need to register the custom route by adding the processer to the Initialise pipeline. Create a config file, Feature.Subscription.config in App_Config/Include folder as below.

The controller is simple. It’s just passing the goal GUID to a GoalTriggerService method created in step 2. The goal can be triggerd by the query string by adding the goal name on the request url. However, registering goals by their GUID is a best practice as adding query parameter with goal name can become flaky.

(4) Create a page with a form.

Let’s use the page created in the previous post, Using Data Source in Controller Renderings. We can update the JavaScript to add a click event listener to the submit button. Yes, it is a little out of ordinary to use a multiline text field to inject JavaScript. The production solution of course should be something a little bit more robust.

(5) Test the solution

You cannot really test this outside of the page context as triggering a goal relies heavily on Sitecore Analytics Tracker. If you use curl to hit the endpoint, the goal registration would not be successful.

The best way to test this is to trigger it from the actual page. When you see the network tab, you can see the success message.

You can also check it in MongoDB. In the interaction collection, you can see the goal is triggered with the defined points, 11.

Yay!

Next steps
Let’s use this goal to create an AB test. Creating a content test in Sitecore is easy. Check this out: How to Set up Content Tests with Data Source)

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …