Documentation
Help CenterCommunityDevelopersAcademyStatus

Capture click events

Suggest Edits

To capture the click events on your SPA or MPA zones, you need to use the trackEvent function. If you do not configure the zone to capture the click events, you cannot calculate the click rate.

Before you begin:

Capture click events on MPA (library v1.5.0)

Add the following code snippet to your MPA page in which the personalized zone is configured. Add the code after the personalization code in the same script tag. For more information, see Configuring the zones of MPA.

personalizationObject.trackEvent("<ZoneID>","<ElementID>","<Event>");

In the code snippet:

  • Replace <ZoneID> with the ID of the zone you want to track the click events. Ensure that this zone ID is the same as that configured in the Acoustic Personalization. Integrate this code with your rendering logic.
  • Replace <ElementID> with the HTML element ID for which you want to track the click events.
  • Replace <Event> with the event type that you want to track for the given zone. In this case, replace event with a click to track the specified zone's click events.
  • Specify the parameters in the same order as specified in the code snippet.

Capture click events on MPA (library v2.0.0)

Add the following code snippet to your MPA page in which the personalized zone is configured. Add the code after the personalization code in the same script tag. For more information, see Zone configuration for MPA.

For content personalization 

personalizationObject.collectBehavior("<ElementID>","<Event>","<ZoneID>");

personalizationObject.collectBehavior("HomePageSubmitBtn","click","WelcomeBannerZone");

In the code snippet:

  • Replace <ElementID> with the ID of the HTML element. For example - HTML ID for a button for which you want to track the click events.
  • Replace <Event> with the event type that you want to track for the given zone. In this case, replace event with a click to track the specified zone's click events.
  • Replace <ZoneID> with the ID of the zone you want to track the click events. Ensure that this zone ID is the same as that configured in the Personalization.

To capture click events across multiple zones, repeat the code. Specify the <ElementID> and the <ZoneID> for the zones.

For product recommendations 

personalizationObject.collectBehavior("<ProductID>", event);

personalizationObject.collectBehavior("Prod_A007", event);

In the code snippet:
Replace <ProductID> with the ID of the product to be recommended.

Capture click events on Angular SPA

  1. Open the component file where the HTML element (elementId) belongs.
  2. Add the ngAfterViewInit() method to your component file if it is not already present.
  3. Add the following code snippet inside the ngAfterViewInit() method.
  4. The code is the second parameter of the trackEvent() function where the tracking action will be performed. For more information, see Configuring the Angular SPA zones.
this.personalizationService.trackEvent("<<zoneId>>","<<elementId>>","<<event>>")

this.personalizationService.collectBehavior("<<elementId>>","<<event>> ","<<zoneId>>");

In the code snippet:

  • Replace zoneId with the ID of the zone for which you want to track the click events. Ensure that this zone ID is the same as that configured in the Acoustic Personalization.
  • Replace elementId with the ID of the HTML element for which you want to track the click events.
  • Replace the event with the event type that you want to track for the given zone. In this case, replace event with a click to track the specified zone's click events.
  • Specify the parameters in the same order as specified in the code snippet.

Capture click events on React SPA

  1. Open the .jsx file of the HTML element for which you want to track the click events.
  2. Add the following code snippet in the componentDidMount() function.
  3. Add the code snippet inside the onReady event of the personalization object. This is similar to adding the getContentId() function to configure the React SPA zones.
    For more information, see Configuring the zones of React SPA.
this.WRTP.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");

this.WRTP.collectBehavior("<<elementId>>","<<event>> ","<<zoneId>>");

In the code snippet:

  • Replace zoneId with the ID of the zone to which you want to attribute the click events. Ensure that this zone ID is the same as that configured in the Personalization.
  • Replace elementId with the HTML element ID for which you want to track the specified event.
  • Replace the event with the event type that you want to track for the given zone. In this case, replace event with a click to track the specified zone's click events.
  • Specify the parameters in the same order as specified in the code snippet.

Here is an example that illustrates the placement of the code snippet in a React component.

componentDidMount()
   {
       this.WRTP = this.context;
       this._isMounted = true;
       this._isMounted &&
       this.WRTP.onReady(() => {
            this.WRTP.trackEvent(
               'WelcomeBannerZone',
               'WelcomeBanner',
               'click'
               );
           });
     }

In this example snippet:

  • context is the personalization object, which is an instance of the Personalization library.
  • WelcomeBannerZone is the ID of the personalized zone.
  • WelcomeBanner is the ID of the HTML element.
  • Click is the event to be captured on the personalized zone.

Updated almost 2 years ago