# Javascript destination builder

For more advanced users, we propose to create custom destinations using server-side **javascript** (aka Node.js), but with an **easy and simplified** subset of Node.js : the ***Javascript Sandbox***.

## Javascript Sandbox

Sandboxed JavaScript is a simplified Javascript that allows you to execute arbitrary JavaScript logic from your custom destination securely and easily (no need to learn Node.js or to understand the async/await syntax for example. If you know the basics of Javascript ES5, it is enough)

This simplified Javascript is based on [helpers](https://doc.commandersact.com/features/destinations/destination-builder/javascript-destination-builder/serverside-js-helpers), set of methods that allow you to easily and quickly process and send your data.

{% hint style="info" %}
The technology for destination's template javascript sandbox in the platform is, to a large extent, compatible with Google Tag manager templates.\
In most cases, templates written for GTM run in Commanders'act with no (or few) changes
{% endhint %}

{% hint style="info" %}
You can also import templates created on GTM inside your catalog in a few clics with a 100% no-code experience.
{% endhint %}

## Event or Audience destination

You can choose to create an **Event** destination (to forward events like purchase, page view\...) or **Audience** destination (send users who entered or were removed from a specific segment).

For **Event** destination, all [standard ](https://doc.commandersact.com/developers/tracking-and-integrations/tracking/events-reference)and custom events can be used as input.

For **Audience** destination, only 2 system events are managed:

* `user_enters_segment`
* `user_leaves_segment`

These 2 events are automatically trigger by the system when a user enter or leave a segment.\
\
Format of audience events:

```json
{
  "event_name": "user_enters_segment",
  "user": {
    "id": "user1",
    "email": "user1@example.com",
    "firstname": "john user1",
    "lastname": "Doe"
  },
  "context": {
    "segment_id": 1,
    "segment_name": "Audience 1"
  }
}
```

```json
{
  "event_name": "user_leaves_segment",
  "user": {
    "id": "user1",
    "email": "user1@example.com",
    "firstname": "john user1",
    "lastname": "Doe"
  },
  "context": {
    "segment_id": 1,
    "segment_name": "Audience 1"
  }
}
```

## The template editor

The Template Editor enables you to create, preview, and test custom templates. It has four primary areas for input to help you define your destination template:

* **Informations:** Define basic information of the template, such as the logo, category, name.
* **Fields:** This is a visual drag\&drop editor to add input fields to your destination template.
* **Code:** Enter sandboxed JavaScript to define how your destination will map/transform/send the data.
* **Publish:** View/change on wich catalogs (workspaces) your destination is visible.

<figure><img src="https://1259070148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6XpTQ2LaRLcr2tA-d%2Fuploads%2Fgit-blob-d2e3f87967798cb7ac7d7273147e516430d06e82%2Fimage.png?alt=media" alt=""><figcaption><p>Drag and drop your fields</p></figcaption></figure>

<figure><img src="https://1259070148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6XpTQ2LaRLcr2tA-d%2Fuploads%2Fgit-blob-970ffd9096e0f3dab731e69059f3b98462a299bb%2Fimage.png?alt=media" alt=""><figcaption><p>Write your code and test it with an event</p></figcaption></figure>