---
title: Tag
slug: tag
docTags: 
createdAt: 2025-06-02T18:30:36.461Z
---

The **Tag** destination lets you run custom JavaScript or HTML snippets in the browser whenever a Chord CDP event fires. Use it to send events to third-party tools that don't have a built-in Chord destination, fire custom pixels, or trigger any browser-side logic tied to your event stream. There is no server-side component.

# Getting Started

This is a device-mode destination. No external credentials are required — you provide the code to execute directly in the destination configuration.

# Connecting to the Tag CDP Destination

1. Log into the Chord data platform.
2. Navigate to the CDP.
3. Click the **"Add"** button next to Destinations.
4. Select **Tag** from the destination catalog.
5. Enter a destination name.
6. Paste your JavaScript or HTML snippet into the **Code** field.
7. Click **"Create"** to connect.

# How It Works

Every time a Chord event fires (e.g. `window.chord.track("Order Completed", {...})`), the Tag destination executes your code once with the full event object available. Your snippet runs synchronously in the browser — no polling, no persistent listeners required.

Two code modes are supported:

## JavaScript Mode

Write plain JavaScript. The event is available as a local `const event` variable — no imports or setup needed.

**Source track call:**

```js
window.chord.track("Order Completed", {
  order_id: "R-10042",
  revenue: 89.95,
  total: 96.94,
  currency: "USD",
  order_date: "2026-05-11T14:23:00Z",
  email: "jane@example.com",
  shipping: 4.99,
  tax: 2.0,
  subtotal: 79.97,
  products: [
    { product_id: "prod_1", sku: "SHIRT-BLU-M", name: "Blue T-Shirt", price: 29.99, quantity: 2, revenue: 59.98 },
    { product_id: "prod_2", sku: "HAT-BLK-OS",  name: "Black Cap",    price: 19.99, quantity: 1, revenue: 19.99 }
  ]
});
```

**Tag destination code:**

```js
console.log(event.event, event.properties);
```

**Console output:**

```javascript
Order Completed {order_id: 'R-10042', revenue: 89.95, total: 96.94, currency: 'USD', order_date: '2026-05-11T14:23:00Z', products: Array(2), …}
```

## HTML Mode

Embed `<script>` tags or pixel `<img>` tags. Use the `{{ event }}` macro inside `<script>` blocks; it is replaced at runtime with the full JSON-serialized event object. Avoid using it in HTML attributes — the substituted value is raw JSON (with quotes and braces) and will break attribute syntax.

**Source track call:** *(same as above)*

**Tag destination code:**

```html
<script>
  var data = {{ event }};
  console.log(data.event, data.properties);
</script>
```

**After macro substitution**, the injected script looks like:

```html
<script>
  var data = {"event":"Order Completed","type":"track","userId":"usr_abc123","anonymousId":"anon_xyz789","timestamp":"2026-05-11T14:23:00.000Z","messageId":"msg_001","properties":{"order_id":"R-10042","revenue":89.95,"total":96.94,"currency":"USD","order_date":"2026-05-11T14:23:00Z","products":[{"product_id":"prod_1","sku":"SHIRT-BLU-M","name":"Blue T-Shirt","price":29.99,"quantity":2,"revenue":59.98},{"product_id":"prod_2","sku":"HAT-BLK-OS","name":"Black Cap","price":19.99,"quantity":1,"revenue":19.99}],"email":"jane@example.com","shipping":4.99,"tax":2.00,"subtotal":79.97},"context":{"page":{"url":"https://mystore.com/checkout/complete"},"userAgent":"Mozilla/5.0 ..."}};
  console.log(data.event, data.properties);
</script>
```

# The Event Object

| Field         | Type   | Present on      | Description                                               |
| ------------- | ------ | --------------- | --------------------------------------------------------- |
| `type`        | string | All events      | Event type: `"track"`, `"identify"`, or `"page"`          |
| `event`       | string | `track` only    | Event name, e.g. `"Order Completed"`                      |
| `userId`      | string | All events      | Identified user ID (if available)                         |
| `anonymousId` | string | All events      | Anonymous browser ID                                      |
| `timestamp`   | string | All events      | ISO 8601 timestamp                                        |
| `messageId`   | string | All events      | Unique ID for this event                                  |
| `properties`  | object | `track`, `page` | Event-specific or page properties                         |
| `traits`      | object | `identify`      | User traits passed to `identify()`                        |
| `context`     | object | All events      | Contextual info: IP, user agent, page URL, campaign, etc. |

Use `event.type` to distinguish between call types; use `event.event` to match specific track event names.

# Filtering by Event Name

Your code receives **every** event. Use a conditional to scope your logic to specific events:

```js
if (event.event === "Order Completed") {
  // runs only on Order Completed
}
```

# Example: Hello World — Order Completed

This snippet logs order details to the browser console and sends a beacon to a custom endpoint whenever an `Order Completed` event fires.

**Source track call:**

```js
window.chord.track("Order Completed", {
  order_id: "R-10042",
  revenue: 89.95,
  total: 96.94,
  currency: "USD",
  order_date: "2026-05-11T14:23:00Z",
  email: "jane@example.com",
  shipping: 4.99,
  tax: 2.0,
  subtotal: 79.97,
  products: [
    { product_id: "prod_1", sku: "SHIRT-BLU-M", name: "Blue T-Shirt", price: 29.99, quantity: 2, revenue: 59.98 },
    { product_id: "prod_2", sku: "HAT-BLK-OS",  name: "Black Cap",    price: 19.99, quantity: 1, revenue: 19.99 }
  ]
});
```

**Tag destination code:**

```js
if (event.event === "Order Completed") {
  var props = event.properties;

  console.log(
    "[My Tag] Order Completed — order_id:", props.order_id,
    "revenue:", props.revenue,
    "currency:", props.currency
  );

  navigator.sendBeacon(
    "https://my-analytics.example.com/collect",
    JSON.stringify({
      event:    event.event,
      order_id: props.order_id,
      revenue:  props.revenue,
      currency: props.currency,
      products: props.products
    })
  );
}
```

**Console output:**

```javascript
[My Tag] Order Completed — order_id: R-10042 revenue: 89.95 currency: USD
```

**Beacon payload** (JSON body sent to your endpoint):

```json
{
  "event": "Order Completed",
  "order_id": "R-10042",
  "revenue": 89.95,
  "currency": "USD",
  "products": [
    {
      "product_id": "prod_1",
      "sku": "SHIRT-BLU-M",
      "name": "Blue T-Shirt",
      "price": 29.99,
      "quantity": 2,
      "revenue": 59.98
    },
    {
      "product_id": "prod_2",
      "sku": "HAT-BLK-OS",
      "name": "Black Cap",
      "price": 19.99,
      "quantity": 1,
      "revenue": 19.99
    }
  ]
}
```

## Order Completed Properties Reference

| Property     | Type   | Required | Description                                       |
| ------------ | ------ | -------- | ------------------------------------------------- |
| `order_id`   | string | Yes      | Order identifier                                  |
| `revenue`    | number | Yes      | Revenue from the order                            |
| `total`      | number | Yes      | Total order value                                 |
| `currency`   | string | Yes      | ISO 4217 currency code (e.g. `"USD"`)             |
| `order_date` | string | Yes      | Order date (ISO 8601)                             |
| `products`   | array  | Yes      | Line items — see tracking plan for product schema |
| `email`      | string | No       | Customer email                                    |
| `first_name` | string | No       | Customer first name                               |
| `last_name`  | string | No       | Customer last name                                |
| `coupon`     | string | No       | Coupon code applied                               |
| `discount`   | number | No       | Discount amount                                   |
| `shipping`   | number | No       | Shipping cost                                     |
| `tax`        | number | No       | Tax amount                                        |
| `subtotal`   | number | No       | Pre-tax, pre-shipping subtotal                    |

For the full tracking plan including all events and property schemas, refer to the Chord Tracking Plan documentation.

# Limitations

- **Device-mode only** — Tag destination code runs in the browser. It has no access to server-side context and cannot be used for server-to-server integrations.
- **No persistent state** — Your snippet is executed fresh on each event. Use `window` to share state across calls if needed.
- **Event filtering** — The destination connection supports `events` and `hosts` filters in the connection settings to restrict which events or domains trigger your code. You can also filter inside your snippet with `event.type` or `event.event` for finer-grained control.

***

**Updated 11 May 2026**