User GuideDeveloper GuideAPI GuideTechnology Partners
Developer Guide
BlogLogin

Events Listener, Actions Listener & Deeplink handling

Learn how to implement and register listeners with the Product Experience (PX) SDK.

Suggest Edits

Use this guide to receive callbacks whenever an action is invoked from a Nudge.

Version 3.7.0 and Above (Recommended)

Step 1: Import the HanselTrackerRn Module

Import the module directly into your React Native component:

import { HanselTrackerRn } from 'smartech-reactnative-nudges';

Step 2: Register Listeners with Callback Methods

You can register listeners directly using the HanselTrackerRn module without creating a separate event emitter instance.

Available Listeners

1. HanselInternalEvent Listener

Receives callbacks for internal Hansel events.

HanselTrackerRn.addListener('HanselInternalEvent', (e) => {
  console.log('Event Detail:', e);
});
2. HanselActionPerformed Listener (Defining Actions via HanselActionListener)

Each listener must be associated with a specific action.
To add the same listener for all actions, register it for each action separately.

HanselTrackerRn.addListener('HanselActionPerformed', (e) => {
  console.log('Action Performed:', e.action);
});

📘

Note

Register listeners from a test device by invoking all the app flows where the listeners are added.
Once registered, actions appear on the Product Experience (PX) dashboard.

3. HanselDeepLinkListener (Handling Deeplinks via Launch URL Option)

Use this listener to receive a callback whenever a Launch URL button action is triggered.

Example:
If a button’s Launch URL is set to http://www.google.com, the URL is returned in the callback.

HanselTrackerRn.addListener('HanselDeepLinkListener', (e) => {
  console.log('DeepLink Listener URL:', e.deeplink);
});

📘

Note

Registering a DeepLinkListener for “Launch URL” overrides the default launch URL behavior for all nudges.

Step 3: Register the Listeners

After adding listeners, register them with the SDK:

// Register tracker listener
HanselTrackerRn.registerHanselTrackerListener();

// Register action listener for a specific action
HanselTrackerRn.registerHanselActionListenerWithActionName('action-name');

// Register deeplink listener
HanselTrackerRn.registerHanselDeeplinkListener();

Replace 'action-name' with the actual action name defined in the Product Experience panel.

Example: Register Listeners Inside useEffect

useEffect(() => {
  HanselTrackerRn.addListener('HanselInternalEvent', (e) => {
    console.log('Event Detail:', e);
  });

  HanselTrackerRn.addListener('HanselActionPerformed', (e) => {
    console.log('Action Performed:', e.action);
  });

  HanselTrackerRn.addListener('HanselDeepLinkListener', (e) => {
    console.log('DeepLink Listener URL:', e.deeplink);
  });

  HanselTrackerRn.registerHanselTrackerListener();
  HanselTrackerRn.registerHanselActionListenerWithActionName('action-name');
  HanselTrackerRn.registerHanselDeeplinkListener();
}, []);

Version Below 3.7.0

If you’re using a version earlier than 3.7.0, follow these steps.

Step 1: Import Required Modules

import { NativeModules, NativeEventEmitter } from 'react-native';

Step 2: Create an Event Emitter Instance

const TrackerEventEmitter = new NativeEventEmitter(NativeModules.HanselTrackerRn);

Step 3: Register Listeners with Callback Methods

1. HanselInternalEvent Listener

TrackerEventEmitter.addListener('HanselInternalEvent', (e) => {
  console.log('Event Detail:', e);
});

2. HanselActionPerformed Listener

Each listener should correspond to a specific action.

TrackerEventEmitter.addListener('HanselActionPerformed', (e) => {
  console.log('Action Performed:', e.action);
});

📘

Note

Register these listeners on a test device to populate registered actions in the Product Experience (PX) dashboard.

3. HanselDeepLinkListener

TrackerEventEmitter.addListener('HanselDeepLinkListener', (e) => {
  console.log('DeepLink Listener URL:', e.deeplink);
});

📘

Note

Registering this listener overrides the default behavior of the Launch URL option for all nudges.

Step 4: Register the Listeners

NativeModules.HanselTrackerRn.registerHanselTrackerListener();
NativeModules.HanselTrackerRn.registerHanselActionListenerWithActionName('action-name');
NativeModules.HanselTrackerRn.registerHanselDeeplinkListener();

📘

Note

Replace 'action-name' with the name defined in your Product Experience (PX) dashboard.

Example: Register Listeners Inside useEffect

useEffect(() => {
  const TrackerEventEmitter = new NativeEventEmitter(NativeModules.HanselTrackerRn);

  TrackerEventEmitter.addListener('HanselInternalEvent', (e) => {
    console.log('Event Detail:', e);
  });

  TrackerEventEmitter.addListener('HanselActionPerformed', (e) => {
    console.log('Action Performed:', e.action);
  });

  TrackerEventEmitter.addListener('HanselDeepLinkListener', (e) => {
    console.log('DeepLink Listener URL:', e.deeplink);
  });

  NativeModules.HanselTrackerRn.registerHanselTrackerListener();
  NativeModules.HanselTrackerRn.registerHanselActionListenerWithActionName('action-name');
  NativeModules.HanselTrackerRn.registerHanselDeeplinkListener();
}, []);

Updated 2 days ago