Tag

12 min

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

Log into the Chord data platform.

Navigate to the CDP.

Click the "Add" button next to Destinations.

Select Tag from the destination catalog.

Enter a destination name.

Paste your JavaScript or HTML snippet into the Code field.

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:

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: "[email protected]",
  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:

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:

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

After macro substitution, the injected script looks like:

<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":"[email protected]","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:

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:

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: "[email protected]",
  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:

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):

{
  "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