> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/activate/event-streaming/destinations/tag-managers/tag.md).

# Tag

The **Tag** destination lets you run custom JavaScript or HTML snippets in the browser whenever a Chord 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 component.

## Getting started

This destination runs in the browser. No external credentials are required. You provide the code to run directly in the destination settings.

## Settings

* **Destination Name** (required): a name to tell this destination apart.
* **Code** (required): the JavaScript or HTML to insert into your site pages.
* **Consent Requirements** (optional): the consent categories a visitor must accept before Chord sends data to this destination. See [Consent](/activate/event-streaming/consent.md).

## Connect

Add **Tag** from the destination catalog, using the settings above. See [Connect a destination](/activate/event-streaming/connect-a-destination.md) for the full steps.

## 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:**

```
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, such as `"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:**

```
[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, see the [tracking plan](/collect-data/tracking-plan.md).

## Limitations

* **Browser 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** — Use the connection's **Events Allowlist** to restrict which events trigger your code. See [Connect a destination](/activate/event-streaming/connect-a-destination.md). You can also filter inside your snippet with `event.type` or `event.event` for finer-grained control.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/activate/event-streaming/destinations/tag-managers/tag.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.