Direct JS Implementation

Unleash User Insights through Script Placement

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.

2. Locate Event Sources

Click the hamburger menu icon in the top left corner.

Select 'Data Hub' > 'Event Sources' from the menu.

3. Choose Your Script

From the available options, select your desired source, typically 'Website' for web app integrations.

4. Download the Script

Navigate to the "Settings" tab.
Locate the "Main Tracking Script" section.

Copy the provided script code, ensuring you capture the entire section within the <script> tags.

<!-- 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 -->

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:

<!-- 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 -->

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

Hover to its name, a small button will appear

Click to the button and you will have your prepared code snippet

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:

if (typeof web_event.track === 'function') {
  // Proceed with calling web_event.track()
} else {
  // Handle the case where the script hasn't loaded yet
}

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:

Example: Product View Event

/** 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 */

Notes

The placeholders like {{product_id}} and {{customer_id}}. Replace these with actual values from your web app's data to ensure accurate tracking.

PreviousGetting Started NextJS Integration via GTM

Last updated 1 year ago

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.

2. Locate Event Sources

Click the hamburger menu icon in the top left corner.

Select 'Data Hub' > 'Event Sources' from the menu.

3. Choose Your Script

From the available options, select your desired source, typically 'Website' for web app integrations.

4. Download the Script

Navigate to the "Settings" tab.
Locate the "Main Tracking Script" section.

Copy the provided script code, ensuring you capture the entire section within the <script> tags.

<!-- 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 -->

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:

<!-- 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 -->

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

Hover to its name, a small button will appear

Click to the button and you will have your prepared code snippet

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:

if (typeof web_event.track === 'function') {
  // Proceed with calling web_event.track()
} else {
  // Handle the case where the script hasn't loaded yet
}

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 of the event. This will be mapped to the primary Business Object in CDP365.
  - dims: An object containing , providing additional context for the event. These will be mapped to related Business Objects in CDP365.
  - extra: An object for , 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

/** 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 */

Notes

The placeholders like {{product_id}} and {{customer_id}}. Replace these with actual values from your web app's data to ensure accurate tracking.

items: An array of objects representing the of the event. This will be mapped to the primary Business Object in CDP365.

dims: An object containing , providing additional context for the event. These will be mapped to related Business Objects in CDP365.

extra: An object for , capturing specific details about the event's circumstances. These will be added as attributes to the main event object in CDP365.

Main Object

Foreign Objects

Event Attributes