Browser Events
Clickstream data collection with Angler AI Javascript SDK
Initializing
Before you start sending data to Angler AI, you would first need to import and initialize the library which is a wrapper around the Events endpoint. You would need 2 variables that you can get from your account manager.
workspaceId
- required - A unique account identifiertoken
- required - A JWT Token used to authorize theworkspaceId
. Please note that this token is for use in the browser only. The backend token should not be used in the browser.clientId
- optional - A unique client/browser identifier._ga
or_fbp
cookie value will be used if this value is not provided.
To initialize the Angler AI Javascript SDK, place this code in the <head>
section of all your pages replacing <WORKSPACE_ID
and <TOKEN>
.
<script src="https://static.getangler.ai/dist/analytics/_latest.min.js">
</script>
<script>
window.anglerai.init({workspaceId: "<WORKSPACE_ID>", token: "<TOKEN>"})
</script>
Sending Data
The Angler AI data collection API has a strict schema so events with the wrong name or schema will get rejected. The full schema can be found in the Events API reference. You can send data using the window.anglerai.sendEvent
function which takes an object with the following properties:
event
- required - Name of the event, must be from the list here: Eventsdata
- Properties associated with the event. Schema can be found here: EventscustomEventName
- Name of event if you are not using a standard event. Required ifevent
iscustom_event
eventId
- A globally unique event identifier. A random UUID is generated if it is not provided.
🐳 will be printed to the developer console when an event has been successfully sent and 🐙 if the request failed.
Examples
page_viewed
with no data:
const data = {
customer : {
email: "[email protected]"
}
}
window.anglerai.sendEvent({eventName: "page_viewed", data: data})
custom_event
with eventId
provided
const data = {
customData : [
name: "quiz_type",
value: "interests"
]
}
window.anglerai.sendEvent({eventName: "custom_event", data: data, customEventName: "quiz_submitted", eventId: "9876543210"})
List of Events
page_viewed
page_viewed
The page_viewed
event logs an instance where a customer visited a page. Recommended properties to include: cart
(if available), customer
(if available)
cart_viewed
cart_viewed
The cart_viewed
event logs an instance where a customer visited the cart page. Recommended properties to include: cart
(if available), customer
(if available)
checkout_address_info_submitted
checkout_address_info_submitted
The checkout_address_info_submitted
event logs an instance of a customer submitting their mailing address. Recommended properties to include: checkout
, cart
(if available), customer
(if available)
checkout_completed
checkout_completed
The checkout_completed
event logs when a visitor completes a purchase. Recommended properties to include: checkout
, cart
(if available), customer
(if available)
checkout_contact_info_submitted
checkout_contact_info_submitted
The checkout_contact_info_submitted
event logs an instance where a customer submits a checkout form. Recommended properties to include: checkout
, cart
(if available), customer
(if available)
checkout_shipping_info_submitted
checkout_shipping_info_submitted
The checkout_shipping_info_submitted
event logs an instance where the customer chooses a shipping rate. Recommended properties to include:checkout
, cart
(if available), customer
(if available)
checkout_started
checkout_started
The checkout_started event
logs an instance of a customer starting the checkout process. Recommended properties to include: checkout
,cart
(if available), customer
(if available)
collection_viewed
collection_viewed
The collection_viewed
event logs an instance where a customer visited a product collection index page. Recommended properties to include: collection
,cart
(if available), customer
(if available)
payment_info_submitted
payment_info_submitted
The payment_info_submitted
event logs an instance of a customer submitting their payment information. Recommended properties to include: checkout
,cart
(if available), customer
(if available)
product_added_to_cart
product_added_to_cart
The product_added_to_cart
event logs an instance where a customer adds a product to their cart. Recommended properties to include: cartLine
,cart
(if available), customer
(if available)
product_removed_from_cart
product_removed_from_cart
The product_removed_from_cart
event logs an instance where a customer removes a product from their cart. Recommended properties to include:cartLine
, cart
(if available), customer
(if available)
product_viewed
product_viewed
The product_viewed
event logs an instance where a customer visited a product details page. Recommended properties to include: productVariant
, cart
(if available), customer
(if available)
search_submitted
search_submitted
The search_submitted
event logs an instance where a customer performed a search on the storefront. The products returned from the search query are in this event object (the first product variant for each product is listed in the array). Recommended properties to include: searchResult
,cart
(if available), customer
(if available)
form_submitted
form_submitted
The form_submitted
event logs a form submission like a lead form. Recommended properties to include: customer
,form
(if available)
custom_event
custom_event
The custom_event
logs any non-standard event. Recommended properties to include: custom_data
, cart
(if available), customer
(if available),
Event Properties
cart
cart
{
"cost": {
"totalAmount": {
"amount": 0,
"currencyCode": "string"
}
},
"id": "string",
"lines": [
{
"cost": {
"totalAmount": {
"amount": 0,
"currencyCode": "string"
}
},
"merchandise": {
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
},
"quantity": 0
}
],
"totalQuantity": 0
}
checkout
checkout
{
"attributes": [
{
"key": "string",
"value": "string"
}
],
"billingAddress": {
"address1": "string",
"address2": "string",
"city": "string",
"country": "string",
"countryCode": "string",
"firstName": "string",
"lastName": "string",
"phone": "string",
"province": "string",
"provinceCode": "string",
"zip": "string"
},
"currencyCode": "string",
"discountApplications": [
{
"allocationMethod": "string",
"targetSelection": "string",
"targetType": "string",
"title": "string",
"type": "string",
"value": {
"amount": 0,
"currencyCode": "string"
}
}
],
"email": "string",
"lineItems": [
{
"discountAllocations": [
{
"amount": {
"amount": 0,
"currencyCode": "string"
},
"discountApplication": {
"allocationMethod": "string",
"targetSelection": "string",
"targetType": "string",
"title": "string",
"type": "string",
"value": {
"amount": 0,
"currencyCode": "string"
}
}
}
],
"id": "string",
"quantity": 0,
"title": "string",
"variant": {
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
}
}
],
"order": {
"id": "string"
},
"phone": "string",
"shippingAddress": {
"address1": "string",
"address2": "string",
"city": "string",
"country": "string",
"countryCode": "string",
"firstName": "string",
"lastName": "string",
"phone": "string",
"province": "string",
"provinceCode": "string",
"zip": "string"
},
"shippingLine": {
"price": {
"amount": 0,
"currencyCode": "string"
}
},
"subtotalPrice": {
"amount": 0,
"currencyCode": "string"
},
"token": "string",
"totalPrice": {
"amount": 0,
"currencyCode": "string"
},
"totalTax": {
"amount": 0,
"currencyCode": "string"
}
}
customer
customer
{
"id": "string",
"email": "string",
"firstName": "string",
"lastName": "string",
"ordersCount": 0,
"phone": "string"
}
collection
collection
{
"id": "string",
"title": "string",
"productVariants": [
{
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
}
]
}
cartLine
cartLine
{
"cost": {
"totalAmount": {
"amount": 0,
"currencyCode": "string"
}
},
"merchandise": {
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
},
"quantity": 0
}
productVariant
productVariant
{
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
}
searchResult
searchResult
{
"query": "string",
"productVariants": [
{
"id": "string",
"image": {
"src": "string"
},
"price": {
"amount": 0,
"currencyCode": "string"
},
"product": {
"id": "string",
"title": "string",
"untranslatedTitle": "string",
"vendor": "string",
"type": "string",
"url": "string"
},
"sku": "string",
"title": "string",
"untranslatedTitle": "string"
}
]
}
form
{
"form": {
"elements": [
{
"id": "string",
"value": "string",
"type": "string",
"tagName": "string",
"name": "string"
}
],
"id": "string",
"action": "string"
}
}
customData
customData
[
{
"name": "string",
"value": "string"
}
]
Updated 6 months ago