Capturing the click events on zones

You can configure the zones of your Single-Page Application or Multi-Page Application to capture click events.

Prerequisite

The zones of your Single-Page Application (SPA) or Multi-Page Application (MPA) must be configured in Acoustic Personalization. For more information, see Registering a zone

Configuring Angular SPA zones to capture click events

Copy the following code snippet and paste it inside the ngAfterViewInit() method in your component file to which the HTML element (elementId as in the code snippet below) belongs. This is the second parameter of trackEvent() function on which the tracking action will be performed.
- Add the ngAfterViewInit() method to your component file if it is not already present.
- For more information about the zone configuration in Angular SPA, see the topic Configuring the zones of Angular SPA.
For Personalization Library >= 1.2.0
```
this.personalizationService.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
For Personalization Library < 1.2.0
```
this.personalizationService.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
For Online Engine version <= 0.1.9
```
this.wrtpService.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
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 event with the event type that you want to track for the given zone. In this case, replace "event" with click to track the click events on the specified zone.
Ensure that you specify the parameters in the same order as specified in the code snippet.

Configuring MPA zones to capture click events

Copy the following code snippet and paste it in your MPA page in which the personalized zone is configured. Add the code just after the personalization code, in the same script tag. For more information about the zone configuration in MPA, see the topic Configuring the zones of MPA
Personalization Library >= 1.2.0
```
personalizationObject.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
Personalization Library < 1.2.0
```
WRTP.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
For Online Engine version <= 0.1.9
```
WRTP.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
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. Integrate this code with your rendering logic.
- Replace elementId with the ID of the HTML element 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 click to track the click events on the specified zone.
Ensure that you specify the parameters in the same order as specified in the code snippet.

Configuring React SPA zones to capture click events

For more information about the zone configuration in React SPA, see the topic Configuring the zones of React SPA

Copy the following code snippet and paste it in the componentDidMount() function, in the .jsx file of the HTML element for which you want to track the click events.
Note: Add the code snippet inside the onReady event of personalization object in the componentDidMount() function. This step is similar to adding the getContentId() function while configuring the zones for React SPA.
```
this.WRTP.trackEvent("<<zoneId>>","<<elementId>>","<<event>>");
```
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 Acoustic Personalization.
- Replace <<elementId>> with the ID of the HTML element for which you want to track the specified event.
- Replace <<event>> with the event type that you want to track for the given zone. In this case, replace "event" with click to track the click events on the specified zone.
- Ensure that you 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 refers to 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.

What is a Primary goal and how is it measured?

The Primary goal for Acoustic Personalization is to maximize the click count on the channel. Acoustic Personalization provides a hook to the channel to capture the clicks on the content rendered in the zone registered for personalization.

Clicks are captured for both personalized content and default content for the visitors belonging to the control group and non-control group. The click count is also used in the Performance Analysis Reports to track the impact of personalization on a zone.

You must configure your SPA or MPA to capture and send the click events to Acoustic Personalization for further processing. Acoustic Personalization detects and manages the number of fraudulent clicks within a session.

Session management: A new session starts after 30 minutes of inactivity/ idle time on the application by the visitor.; A new session starts at the end of every day for a given visitor, irrespective of the user activity.
Scenarios handled for tracking clicks on zones registered for personalization: Content on a zone changes; New session starts

What if I do not capture click events?

It is not mandatory to configure zones to capture click events. You should perform the steps in this topic only if you want to measure the effectiveness of a personalized content by capturing the clicks on that zone.

If you do not configure zones to capture the click events, the Click rate metric (which determines how many times a visitor clicked the personalized content or the default content), cannot be calculated. In the performance dashboard for rule, you would only see the Display count. The click count, and hence the click rate, will be shown as NA.