Advanced user behaviour research: add custom events to an Adaptive Form and capture those via Adobe Analytics

[#1]

Capturing Custom Events in Adobe Analytics with Adaptive Forms by Saurabh Kumar 

In today's digital age, data plays a crucial role in decision-making and improving user experiences. When working with Adobe Experience Manager Adaptive Forms, capturing user interactions can provide valuable insights into user behavior. Adaptive Forms captures and sends multiple events (metrics) to Adobe Analytics to help you track user behaviors.. 
 
In this blog post, we'll guide you through the process of capturing and sending custom events (events not captured OOTB) to Adobe Analytics, using an example of a benefit enrollment form with a reset button.   

Understanding the Problem 

By default, Adaptive Forms does not capture and send the reset event to Adobe Analytics. This means that the valuable data associated with form resets is often left untracked. However, there is a solution to this problem. You can send custom events by utilizing the Analytics automation setup. We will also investigate how we can edit the AEM (Adobe Experience Manager) Forms analytics OOTB dashboard to incorporate this matrix. 

Pre-requisites 

I have already triggered analytics automation setup for our benefit enrollment form. You can also setup the FastTrack analytics for your forms to follow along.

The Solution 

To capture form reset events effectively, create a custom client library which dispatches JavaScript event when the reset button is clicked. This event contains essential information about the form, field, and panel involved in the reset action. Let us break down the solution step by step. 

1. Clone your Forms as a Cloud Service Git repository.  
2. Create a Client Library and add the following code in the format provided below to push a custom event to Data Layer:  
   

   adobeDataLayer.push({

   event: "FormEvent",

   eventInfo: {

   formTitle: YOUR_FORM_TITLE,

   fieldTitle: YOUR_FIELD_TITLE,

   fieldType: YOUR_FIELD_TYPE,

   panelTitle: YOUR_PANEL_TYPE,

   eventName: YOUR_EVENT_NAME,

   }

   });

   In this code: 
   - `"formTitle"` is the title of your form, in this case, "Enrollment Form." 
   - `"fieldTitle"` is the label of the component, which is "Reset." 
   - `"fieldType"` represents the type of component, which is "Button." 
   - `"panelTitle"` is the title of the panel containing the component, here, "Insurance Panel." 
   - `"eventName"` is the name of the event, which is "Form Reset." 
   
   Make sure to replace these placeholders with your actual form, field, and panel titles. 
   
   You can create a client library from scratch and trigger the above-mentioned code or you can use an existing client library that overwrite the existing DataLayer implementation. You can find the existing client library at:  https://github.com/adobe/aem-core-forms-components/tree/master/ui.af.apps/src/main/content/jcr_root/... 
3. Create a function in the datalayer.js of the client library, as displayed in the below image, to capture and send the reset event to Adobe Analytics report suite configured for your form.  
   
   
4. Use the Cloud Manager pipeline to deploy the updated client library to your Forms as a Cloud Service environment.

Test the reset event in form  

We can use the Adobe Experience Platform Debugger extension to make sure our reset events are being triggered.  

Visualize this new event in the Adobe Analytics dashboard. 

You can create a new table with dimension as “form Title” and event as “FormEvent” filtered on “Event Name”. We can further breakdown the report based on “Field Title” to know exactly which filed the customer was on before he clicked Reset: 

The data for an event may start appearing approximately 2 hours after triggering of an event.    

Bonus content: Foundation component-based Adaptive Form 

Foundation component-based forms trigger events on the window object with the same event payload, and the event name. So, for Foundation component-based forms use window.dispatchEvent and create a new client library instead of overriding the one with data layer.  Here is a sample code snippet for “Form Reset” event.  

window.dispatchEvent("FormEvent", {

formTitle: YOUR_FORM_TITLE,

fieldTitle: YOUR_FIELD_TITLE,

fieldType: YOUR_FIELD_TYPE,

panelTitle: YOUR_PANEL_TYPE,

eventName: YOUR_EVENT_NAME,

})

Analytics automation setup in AEM Forms is extremely modular which leaves room for customization as required. This example shows how we can add a simple form event to use analytics automation setup to dispatch analytics call and visualize the same in analytics dashboard. 

References 

https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/... 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/forms/integrate/ser... 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/forms/integrate/ser... 

Q&A

Please use this thread to ask questions relating to this article