This guide focuses on the direct JS implementation method for integrating the Antsomi SDK into your web application. By manually placing the tracking script within your website's code, you gain complete control over its placement and timing.
Retrieve Your Tracking Script
To begin, follow these steps to retrieve the required script from your CDP365 account:
1. Access Your CDP365 Dashboard
Navigate to your CDP365 dashboard.
CDP365 dashboard
2. Locate Event Sources
Click the hamburger menu icon in the top left corner.
The burger button on the top left to open the menu sidebar
Select 'Data Hub' > 'Event Sources' from the menu.
The expanded menu Data Hub and its submenu Event Sources
3. Choose Your Script
From the available options, select your desired source, typically 'Website' for web app integrations.
Your desired source (currently it is the source 'Website')
4. Download the Script
Navigate to the "Settings" tab.
Locate the "Main Tracking Script" section.
Tab Event Setting
Copy the provided script code, ensuring you capture the entire section within the <script> tags.
Since the default main script only serves websites with 1 domain, if you have multiple sub-domains that you want to track your users' behavior, please adjust the main script as follows:
Please replace the ".<DOMAIN>" with your real domain, and pay attention to the dot (.) at the beginning too.
Implement the Script
Now, it's time to place the script within your web app's code. Follow these steps for successful implementation:
1. Identify Tracked Pages:
Determine which pages you want to track user behavior on within your web app.
2. Add the Script:
Open the HTML files for your chosen pages.
Locate the <head> tag at the beginning of the document.
Paste the copied script code immediately inside the opening <head> tag.
Ensure the script placement is consistent across all desired pages for accurate data collection.
Custom Event Tracking with Antsomi JS Functions
Prepare the Event Data
Before sending your first event data, you must assign that event to the desired source (in Website tracking, the source is usually named 'Website'). Then you can have the event firing code snippet be the following:
From your source, identify your tracking event (in this example is the event 'View Product'):
Your desired source (currently it is the source "Website")
Hover to its name, a small button will appear
Your tracking event (in this example is the event 'View Product')
Click to the button and you will have your prepared code snippet
Your event script
Send your Event
After you have had your event script code snippet, you can start putting the data into these placeholders.
1. Check for Script Loading
Before calling web_event.track(), ensure the main tracking script is fully loaded. You can achieve this by verifying the existence of the function using a conditional statement:
2. Structure Your Event
The web_event.track() function accepts three parameters:
Event Category: A general classification of the event (e.g., 'product', 'pageview').
Event Action: A specific action within the category (e.g., 'view', 'add_to_cart').
Event Data: An object containing details about the event, including:
items: An array of objects representing the Main Object of the event. This will be mapped to the primary Business Object in CDP365.
dims: An object containing Foreign Objects, providing additional context for the event. These will be mapped to related Business Objects in CDP365.
extra: An object for Event Attributes, capturing specific details about the event's circumstances. These will be added as attributes to the main event object in CDP365.
Example: Product View Event
Event 'View Product' settings on the CDP365 dashboard
Notes
The placeholders like {{product_id}} and {{customer_id}}. Replace these with actual values from your web app's data to ensure accurate tracking.
<!-- CDP Web Insight script -->
<script type = "text/javascript" >
var _portalId = "564890637"; // Portal Demo Ecom
var _propId = "564993250";
var _ATM_TRACKING_ASSOCIATE_UTM = 0 ; // https://demo-ecom.antsomi.com
(function() {
var w = window;
if (w.web_event) return;
var a = window.web_event = function() {
a.queue.push(arguments);
}
a.propId = _propId;
a.track = a;
a.queue = [];
var e = document.createElement("script");
e.type = "text/javascript", e.async = !0, e.src = "//st-a.cdp.asia/insight.js";
var t = document.getElementsByTagName("script")[0];
t.parentNode.insertBefore(e, t)
})(); </script>
<!-- End of CDP Web Insight script -->
<!-- CDP Web Insight script -->
<script type = "text/javascript" >
var _portalId = "564890637"; // Portal Demo Ecom
var _propId = "564993250";
var _ATM_TRACKING_ASSOCIATE_UTM = 0 ; // https://demo-ecom.antsomi.com
// Add this declaration
var _cdp365Analytics = {
first_party_domain: ".<DOMAIN>" // e.g.: .antsomi.com
};
(function() {
var w = window;
if (w.web_event) return;
var a = window.web_event = function() {
a.queue.push(arguments);
}
a.propId = _propId;
a.track = a;
a.queue = [];
var e = document.createElement("script");
e.type = "text/javascript", e.async = !0, e.src = "//st-a.cdp.asia/insight.js";
var t = document.getElementsByTagName("script")[0];
t.parentNode.insertBefore(e, t)
})(); </script>
<!-- End of CDP Web Insight script -->
if (typeof web_event.track === 'function') {
// Proceed with calling web_event.track()
} else {
// Handle the case where the script hasn't loaded yet
}
/** start tracking event: view_product */
web_event.track("product", "view", {
// Main Object (mapped to Product Business Object in CDP365)
items: [
{
type: "product",
id: "{{product_id}}",
name: "{{product_name}}",
page_url: "{{product_page_url}}",
// ... other product details
}
],
// Foreign Objects (mapped to Customer and other relevant Business Objects in CDP365)
dims: {
customers: {
customer_id: "{{customer_id}}",
name: "{{customer_name}}",
// ... other customer information
}
// ... other Foreign Objects (e.g., campaigns, devices)
},
// Event Attributes (added as attributes to the event object in CDP365)
extra: {
identify_type: "exact",
identify_event: "{{event_action}}", // Note: This should match the event action
identify_id: "{{customer_id}}",
identify_time: "{{identify_time}}"
// ... other Event Attributes
}
});
/** end block */
