website logo
Navigate through spaces
Chord Commerce
⌘K
Getting Started
CMS
Data
OMS
Integrations
👩‍💻Developer Tools
Shopify
Docs powered by archbee 
2min

Attentive





Introduction

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







All Attentive API documentation can be found here.





Click Create.

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.



Document image




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.



Replace the customer name with the right one. An example: https://cdn.attn.tv/chord/dtag.js





JS
|




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







SNIPPET if you do not have access to Github













Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Facebook
Docs powered by archbee 
TABLE OF CONTENTS
Introduction
Setup Attentive
Create a custom App for your account:
Create the Attentive destination function
Edit destination functions settings.
Add the Attentive tag to the codebase
SNIPPET if you do not have access to Github