# Automatic
Source: https://docs.datopus.io/auto-tracking

Automatic Event Tracking

Any website or web app can be decomposed into a set of features. A feature can consist of other features and/or controls, such as buttons, forms, links, etc.

Datopus watches for any activity happening inside a specific HTML element that marked with a special tag `[data-ds-feature=name]`. You should define this HTML element yourself, and it should represent a feature in your app or website.

```javascript HTML theme={null}
<div data-ds-feature="Dashboard">
  ...
</div>
```

Tracker looks at all the smaller parts within a marked element and records what they do. These events include clicks, mouse movements, form submissions, or any other user interactions within that designated area.


# Manual
Source: https://docs.datopus.io/manual-tracking

Manual Event Tracking

#### Tracking actions

Use the track method `trackAction` to manually register activity on a feature.

For example, you can register engagement on feature `CTA: Add To Cart` in the next ways

<AccordionGroup>
  <Accordion title="Context-free">
    ```javascript JS theme={null}
    window.datopus('trackAction', 'CTA: Add To Cart');
    ```
  </Accordion>

  <Accordion title="Leverage standard Datopus params to convey action's relation to HTML tag">
    ```javascript JS theme={null}
    window.datopus('trackAction', 'CTA: Add To Cart', {
    	elemTag: 'button',
    	elemName: 'add-to-cart-btn',
    	elemText: 'Add To Cart',
    	elemEvent: 'click'
    });
    ```
  </Accordion>

  <Accordion title="Add your own context">
    ```javascript JS theme={null}
    window.datopus('trackAction', 'CTA: Add To Cart', {
    	user_subscription: 'Premium',
    	product_name: 'Product A',
    	product_category: 'Category B'
    });
    ```
  </Accordion>
</AccordionGroup>

#### Tracking views

Use the track method `trackView` to manually register a view on a feature. This method is useful for tracking when a feature appears on a page, also known as an **impression**.

<Tip>
  By analyzing feature **views** and feature **actions**, businesses determine the **Feature Engagement Rate**.
</Tip>

```javascript JS theme={null}
window.datopus('trackView', this.featureName);
```


# Quickstart
Source: https://docs.datopus.io/quickstart

Follow these instructions to quickly implement a Datopus web tracker with default configuration.

Getting started with sending events using the JavaScript tracker is very similar to other web analytics vendors like Google Analytics, Adobe Analytics, etc.

The process involves the following high level steps:

#### Adding the code snippet

Add the code snippet below to your site, to all the pages you'd like to track.

<Tip>
  Place the code snippet directly into your codebase. Typically this will be wrapped with `<script>` and placed into the `<head>` element of your page or in a similar suitable location if using a Single Page Application framework.
</Tip>

```javascript JS theme={null}
((d,a,t,o,p,u,s)=>{if(!d[p]){let e={view:p+":prevViewFeature",action0:p+":prevActionFeature0",action1:p+":prevActionFeature1"};Object.values(e).forEach(key=>t.setItem(key,"")),d.GlobalDatopusNamespace=d.GlobalDatopusNamespace||[],d.GlobalDatopusNamespace.push(p),d[p]=function(...args){["trackView","trackAction"].includes(args[0])&&(args.length<3&&Array.prototype.push.call(args,{}),"trackView"===args[0]?(args[2].prevFeature=t.getItem(e.view),t.setItem(e.view,args[1])):t.getItem(e.action1)===args[1]?args[2].prevFeature=t.getItem(e.action0):(args[2].prevFeature=t.getItem(e.action1),t.setItem(e.action0,args[2].prevFeature),t.setItem(e.action1,args[1]))),(d[p].q=d[p].q||[]).push(args)},d[p].q=d[p].q||[],u=a.createElement("script"),s=a.getElementsByTagName("script")[0],u.async=!0,u.src="https://datopus.blob.core.windows.net/scripts/ds.min.js",s.parentNode.insertBefore(u,s)}})(window,document,localStorage,0,"datopus");
```

#### Configuring a tracker

Configure an instance of the tracker by calling `newTracker` with your desired properties.

```javascript JS theme={null}
window.datopus('newTracker', 'www.tracked_domain.com')
```

where '`www.tracked_domain.com`' is your domain name.

<Tip>
  Tip for B2B: instead of hardcoding a domain name, obtain it from a browser variable `window.location.hostname`.

  ```javascript theme={null}
  window.datopus('newTracker', window.location.hostname)
  ```
</Tip>

#### Using the tracker

Tracker allows to track events automatically and manually. For auto-tracking it's enough to just add `[data-ds-feature=name]` attribute to a HTML element representing a single feature.

Explore these articles to find more about [auto-tracking](/auto-tracking) and [manual-tracking](/manual-tracking).