Leveraging events on the custom Affinity home page

Affinity utilizes events to broadcast crucial information, offering insights into user behavior and enabling the creation of synchronized custom content extensions.

Below is an overview of the various event types supported by Affinity and how they can be leveraged. Note that you must be on the Recharge Pro plan, or a Custom plan, to make advanced customizations to the Affinity customer portal.

📘
Platform

Shopify Checkout Integration

Migrated Shopify Checkout Integration

Before you start

🚧
Note
This article only applies if you use the Affinity Home Page Builder, to customize the Affinity customer portal. See Leveraging events in Affinity if you are using the previous version of Affinity.

Available events

Event type	Purpose
Click events	Click events are initiated by user actions and primarily indicate intent. The click event is triggered at the initial step, capturing the user's initial intent. For example, the process of a user skipping their next order contains three events, the first being the click event: Event 1: The user clicks the Skip button. The click event is triggered here. Event 2: The user confirms their choice by clicking the Yes, skip this order button in the modal. Event 3: Recharge skips the user's order.
Action events	Action events signify the finalization of an action. Considering the example of a user skipping their next order contains three events, the final event, the actual skipping of the order, is considered the action event.
Navigation events	Navigation events are emitted every time a user navigates to a new page in Affinity. Navigation events are used to understand user engagement and navigation patterns in the portal.
Directives	These events are listened to, rather than emitted by Affinity. These allow custom extensions to trigger specific behaviors within Affinity.

Events emitted by Affinity

Event	Event type	Event name
Subscription	Click	`Recharge::click::manageSubscription`
Skip	Click	`Recharge::click::skip`
Unskip	Click	`Recharge::click::unskip`
Order now	Click	`Recharge::click::orderNow`
Reschedule	Click	`Recharge::click::reschedule`
Cancel	Click	`Recharge::click::cancel`
Reactivate	Click	`Recharge::click::reactivate`
Skip	Action	`Recharge::action::skip`
Unskip	Action	`Recharge::action::unskip`
Order now	Action	`Recharge::action::orderNow`
Reschedule	Action	`Recharge::action::reschedule`
Reactivate	Action	`Recharge::action::reactivate`
Order changed	Action	`Recharge::action::orderChanged`
Location changed	Navigation	`Recharge::location::change`

The Order changed action event is emitted when there’s a change that affects upcoming orders, such as a new product being added, a subscription being updated, or an order being rescheduled.

Events Affinity listens for

Event	Event type	Event name	Action
Refresh page	Directive	`Affinity:refresh`	Trigger a soft page refresh.

Practical application of events

Create personal flows

Use Affinity to craft user experiences that meet your unique business needs. You can intercept the default behavior when a customer initiates an action, such as skipping, rescheduling, or cancelling an order, and instead initiate a custom flow.

The following example highlights how to add your custom flow when a customer initiates the reschedule action:

<script>
document.addEventListener("Recharge::click::reschedule", (event) => {
 // Display custom reschedule UI
});
</script>

Analytics

Use events to transmit data to your preferred analytics tools and gain insight into your users' behaviors:

Use Click and Action events to observe the completion rates when customers perform actions such as skipping or rescheduling an order, or ordering a product immediately. This is achieved by comparing the initial click, which shows intent, against the completion of the action.
Use Navigation events to analyze user engagement and map out customer journeys within your portal. This helps in identifying popular paths and potential areas for improvement.