Autocorp Lifecycle Events
Dynamic API 2.1
Step 1: Load AVA API
Ensure the desired AVA tools are successfully installed. Please refer to the installation docs, if required. Installation documentation for our products can be found under the Install Guide section.
Please note a client Widget ID will be required. If one has not been provided to you, please email support@autocorp.ai.
Step 2: Determine required Lifecycle Events
Within the AVA customer journey, a number of events can be triggered throughout the lifecycle of the app. In order to fire your own actions when an event occurs, an event listener must be attached via the Lifecycle Events API.
The available events are:
widgetOpened:- The consumer opened the modal (engaged with a CTA), or an embedded form loaded on the page
widgetClosed:- The consumer closed the modal (does not fire for embedded forms)
userEngaged:- The consumer interacted with the form (Ex. Changed inputs)
partialLeadSubmit:- The consumer completed a portion of the app and their existing information was saved
creditToolSubmit:- The consumer submitted their Personal Identifying Information (PII) in order to retrieve their credit score
creditAppSubmit:- The consumer filled out and submitted the additional information for a "Credit App"
tradeToolSubmit:- The consumer submitted their PII & Vehicle Information in order to retrieve a KBB trade-in value for their vehicle
creditReportReceived:- The consumer successfully received their credit report
Step 3: Attach Event listener
In order to utilize the Lifecycle Events API, you will need to attach event listeners to the events listed above. Attaching the event listeners can be achieved by utilizing the askAVA.events() method on the AskAVA API.
To create this function, you must add a new <script> tag on your page as seen below (you may remove specific events if they are not required):
<script>
function registerEvents() {
askAva.events({
widgetOpened: () => {
console.log("Widget Opened");
},
widgetClosed: () => {
console.log("Widget Closed");
},
userEngaged: () => {
console.log("User engaged");
},
creditToolSubmit: () => {
console.log("Credit Tool Submitted");
},
tradeToolSubmit: () => {
console.log("Trade Tool Submitted");
},
creditAppSubmit: () => {
console.log("Credit App Submitted");
},
partialLeadSubmit: () => {
console.log("Partial Credit Lead Submitted");
},
creditReportReceived: () => {
console.log("Credit Report Received");
},
})
}
</script>Step 4: Define onload function
Once the AVA API has been successfully installed and loaded, you may attach the lifecycle event listeners. To ensure it is available, you can attach an onload function using one of three different methods:
Method 1: The global askAva object
<script>
window.askAva = (
window.askAva || {}
);
window.askAva.onload = registerEvents;
</script>
<script
src="https://assets.askava.ai/v2/api.js?widgetId=<YOUR_WIDGET_ID>"
type="application/javascript"
async
defer
></script>Method 2: onload query parameter
When the api script is added with a <script> tag, you can use the onload query parameter to register an onload function:
<script
src="https://assets.askava.ai/v2/api.js?widgetId=<YOUR_WIDGET_ID>&onload=registerEvents"
type="application/javascript"
async
defer
></script>Method 3: avaOnload attribute
The AskAva API script (api.js) will look for a custom attribute on the loading <script> tag. This can be used if that script is inserted on the page dynamically:
<script>
(function() {
const sc = document.createElement('script');
sc.type = "application/javascript";
sc.src = "https://assets.askava.ai/v2/api.js?widgetId=<YOUR_WIDGET_ID>";
// This attaches the function reference created earlier
sc.avaOnload = registerEvents;
document.head.appendChild(sc);
})()
</script>Complete Example:
Including the AskAva API dynamically
<script>
(function() {
function registerEvents() {
askAva.events({
widgetOpened: () => {
console.log("Widget Opened");
},
widgetClosed: () => {
console.log("Widget Closed");
},
creditToolSubmit: () => {
console.log("Credit Tool Submitted");
},
tradeToolSubmit: () => {
console.log("Trade Tool Submitted");
},
creditReportReceived: () => {
console.log("Credit Report Received");
},
creditAppSubmit: () => {
console.log("Credit App Submitted");
},
partialLeadSubmit: () => {
console.log("Partial Credit Lead Submitted");
},
})
}
window.askAva = (window.askAva || {});
window.askAva.onload = registerEvents;
const sc = document.createElement('script');
sc.type = "application/javascript";
sc.src = "https://assets.askava.ai/v2/api.js?widgetId=<YOUR_WIDGET_ID>";
document.head.appendChild(sc);
})()
</script>Step 5: Set up Google Events
*Please ensure appropriate tags are utilized
If you require assistance setting up your Google Analytics and Events, please refer to the Google Developers guide found here:
https://developers.google.com/analytics/
For GA4:
https://developers.google.com/analytics/devguides/collection/ga4/events?client_type=gtm/
Step 6: Insert your Analytics ID in the portal
Add your Analytics pixels to the dealer portal: