# Direct JS Implementation
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 `
```
{% endtab %}
{% endtabs %}
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:
{% tabs %}
{% tab title="HTML" %}
```markup
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
Please replace the `"."` with your real domain, and pay attention to the dot (.) at the beginning too.
{% endhint %}
## **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 `` tag at the beginning of the document.
* Paste the copied script code **immediately inside the opening `` 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:
{% tabs %}
{% tab title="JavaScript" %}
```javascript
if (typeof web_event.track === 'function') {
// Proceed with calling web_event.track()
} else {
// Handle the case where the script hasn't loaded yet
}
```
{% endtab %}
{% endtabs %}
#### **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**](https://docs.antsomi.com/developer-guide/~/changes/ozJy59lgDpdkZGSZKOYm/overview/events#main-object-vs.-foreign-objects-defining-the-event-context) of the event. This will be mapped to the primary Business Object in CDP365.
* `dims`**:** An object containing [**Foreign Objects**](https://docs.antsomi.com/developer-guide/~/changes/ozJy59lgDpdkZGSZKOYm/overview/events#main-object-vs.-foreign-objects-defining-the-event-context), providing additional context for the event. These will be mapped to related Business Objects in CDP365.
* `extra`**:** An object for [**Event Attributes**](https://docs.antsomi.com/developer-guide/~/changes/ozJy59lgDpdkZGSZKOYm/overview/events#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
{% tabs %}
{% tab title="JavaScript" %}
/** 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 */
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
**Notes**
The placeholders like `{{product_id}}` and `{{customer_id}}`. Replace these with actual values from your web app's data to ensure accurate tracking.
{% endhint %}
