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 identifier
  • token - required - A JWT Token used to authorize the workspaceId. 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: Events
  • data - Properties associated with the event. Schema can be found here: Events
  • customEventName - Name of event if you are not using a standard event. Required if event is custom_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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

{
  "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

{
  "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

{
  "id": "string",
  "email": "string",
  "firstName": "string",
  "lastName": "string",
  "ordersCount": 0,
  "phone": "string"
}

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

{
  "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

{
  "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

{
  "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"
    }
  ]
}

customData

[
  {
    "name": "string",
    "value": "string"
  }
]

What’s Next