Create a custom App for your account:
Navigate to Attentive and click on Marketplace.
Click Create App in the top right corner.
Enter a unique name for your app in the App name field.
Enter your email address in the Contact email field.
Edit the Permissions (From No Access to Write) for the following APIs (by default, all APIs have No Access selected):
API Key modal displays
It is essential that you copy and keep the API key in a secure place.
Click X to exit the modal after you’ve saved your API key.
Create the Attentive destination function
Complete the following steps to create a destination function:
Navigate to your Segment Workspace.
Click on Connections and click on Add Destinations.
In the Functions tab, click on New Function
select the Destination option and click on the Build button.
Click on the Settings tab to the right and add the following properties:
- attentiveAccessToken (string): The access token to use to make authenticated API calls to Attentive.
- productViewEventName (string): The product view event name to map to Attentive product view events.
- addToCartEventName (string): The add to cart event name to map to Attentive add to cart events.
- purchaseEventName (string): The purchase event name to map to Attentive purchase events.
- allowCustomEvents (boolean): When set to true, any event that is not a Product View, Add To Cart, or Purchase event will be tracked via the custom events API.
Click on Configure.
Fill the form with the function Name (mandatory) and Description (optional) and click Create Function.
Click on Connect Destination button, and finally select the source.
It is common to connect both Back and Front-End Production sources
Edit destination functions settings.
Now that you have created the destination function, let's review the Settings
On the left sidebar click on Connections/Destinations.
Click Destination and search for Attentive.
Select Front-End and in the Settings select:
addToCartEventName = Product Added
allowCustomEvents = ON
attentiveAccessToken = "paste the key you stored above when creating a custom app for your account".
productViewEventName = Product Viewed
purchaseEventName = Order Completed
Repeat same Settings for Back-End Production Source
Add the Attentive tag to the codebase
The last step is to add the attentive tag script to the codebase. The process may vary based on frameworks and architecture strategies.
Replace the customer name with the right one. An example: https://cdn.attn.tv/chord/dtag.js
Below, there are some popular examples with Gatsby and NextJS:
Using the Script component inside _app.js
Using a plugin
Using Gatsby Server Rendering APIs
SNIPPET if you do not have access to Github