Attentive

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):











Click Create.

API Key modal displays











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.







Replace the code in the editor with this snippet. Don't copy lines below this comment.



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.









Below, there are some popular examples with Gatsby and NextJS:



NextJS

Using the Script component inside _app.js

Using the Script component inside _document.js



Gatsby



Using html.js

Using a plugin

Using Gatsby Server Rendering APIs