# Constructeur de destination Javascript

Pour les utilisateurs avancés, nous proposons de créer des destinations personnalisées en utilisant server-side **javascript** (alias Node.js), mais avec un **sous-ensemble** simple et simplifié de Node.js : le ***Javascript Sandbox***.

## Javascript Sandbox

Sandboxed JavaScript est un Javascript simplifié qui vous permet d'exécuter une logique JavaScript arbitraire depuis votre destination personnalisée de manière sécurisée et simple (pas besoin d'apprendre Node.js ni de comprendre la syntaxe async/await par exemple. Si vous connaissez les bases de Javascript ES5, c'est suffisant)

Ce Javascript simplifié est basé sur [helpers](https://doc.commandersact.com/fr/fonctionnalites/destinations/destination-builder/javascript-destination-builder/serverside-js-helpers), un ensemble de méthodes qui vous permettent de traiter et d'envoyer vos données facilement et rapidement.

{% 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 %}

## Destination Événement ou Audience

Vous pouvez choisir de créer une **Event** destination (pour transférer des événements comme purchase, page view\...) ou **Audience** destination (envoyer les utilisateurs qui sont entrés ou ont été retirés d'un segment spécifique).

Pour **Event** destination, tous les [standard ](https://doc.commandersact.com/fr/developpeurs/tracking-and-integrations/tracking/events-reference)et événements personnalisés peuvent être utilisés en entrée.

Pour **Audience** destination, seuls 2 événements système sont gérés :

* `user_enters_segment`
* `user_leaves_segment`

Ces 2 événements sont déclenchés automatiquement par le système lorsqu'un utilisateur entre ou quitte un segment.\
\
Format des événements d'audience :

```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"
  }
}
```

## L'éditeur de template

Le Template Editor vous permet de créer, prévisualiser et tester des templates personnalisés. Il comporte quatre zones principales pour les saisies afin de vous aider à définir votre template de destination :

* **Informations :** Définissez les informations de base du template, telles que le logo, la catégorie, le nom.
* **Champs :** Il s'agit d'un éditeur visuel drag\&drop pour ajouter des champs de saisie à votre template de destination.
* **Code :** Saisissez du sandboxed JavaScript pour définir comment votre destination va mapper/transformer/envoyer les données.
* **Publier :** Voir/modifier sur quels catalogs (workspaces) votre destination est visible.

<figure><img src="https://3282103337-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>Glissez-déposez vos champs</p></figcaption></figure>

<figure><img src="https://3282103337-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>Écrivez votre code et testez-le avec un événement</p></figcaption></figure>