> 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/advertising/rokt/rokt-pixel.md).

# Rokt Pixel

Rokt is an advertising and offer-placement network. The Rokt Pixel destination loads Rokt's Web SDK in the browser and records conversions and page views, so Rokt can attribute a purchase or signup back to the campaign that drove it and build retargeting audiences.

For the server-side equivalent, see [Rokt Events API](/activate/event-streaming/destinations/advertising/rokt/rokt-events-api.md). The two can run together. See [Rokt](/activate/event-streaming/destinations/advertising/rokt.md) for how they work together.

## Getting started

You need one credential from Rokt, and you need to remove any snippet you installed yourself.

**Your Rokt credential.** Rokt runs two browser SDKs and provisions an account for one or the other, so paste whichever value **my.rokt.com > Integrations > Set up the Snippet** gave you and Chord loads the matching integration:

* If your snippet loads from `apps.rokt-api.com` and carries an **API Key**, put it in **API Key**.
* If your snippet calls `createLauncher({ accountId })` and loads `launcher.js`, put that value in **Account ID**.

Fill in one, not both. They are not interchangeable — an Account ID in the API Key field produces a `404` from Rokt's CDN and nothing loads. Neither is the API key and secret pair the [Rokt Events API](/activate/event-streaming/destinations/advertising/rokt/rokt-events-api.md) destination uses.

{% hint style="info" %}
**The Account ID integration can display Rokt offers on your site.** Its only entry point is Rokt's offer-selection call, so on each conversion Chord asks Rokt for a placement and Rokt may render an overlay, an embedded unit, or an interstitial on your confirmation page. What renders, and whether anything does, is controlled by what you configure in Rokt. The API Key integration records conversions without requesting placements.
{% endhint %}

**Remove any Rokt snippet you installed yourself.** This destination replaces it. Two copies of Rokt's SDK on one page initialize twice and report every conversion twice.

## Settings

* **Destination Name** (required): a name to tell this destination apart.
* **API Key** (optional): the API key from your Rokt snippet, if the snippet loads from `apps.rokt-api.com`. Fill in this field or **Account ID**, not both.
* **Account ID** (optional): your Rokt account ID, if your snippet calls `createLauncher` and loads `launcher.js`. Fill in this field or **API Key**, not both.
* **Email Format** (optional): whether the shopper's email is sent as the raw address or as a SHA-256 hash. Defaults to the raw address, which Rokt recommends and matches on. Switch to hashed if your security policy does not allow a plain email address in the page's network traffic. Rokt matches either form, so attribution is unaffected.
* **Development Mode** (optional): sends events to Rokt's development data environment. Off by default. Turn it on while you test and off before launch, because Rokt does not report on development data.
* **Custom Event Mapping** (optional): routes an additional Chord event onto a Rokt conversion type (`purchase`, `signup`, `subscription` or `screen_view`). See [Event mapping](#event-mapping). Use the same mapping on the Rokt Events API destination.
* **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 **Rokt Pixel** from the destination catalog, using the settings above. See [Connect a destination](/activate/event-streaming/connect-a-destination.md) for the full steps.

## Event mapping

Rokt records a conversion as a single event named `conversion`, with a `conversiontype` attribute saying what kind it was. Chord maps events like this:

| Chord event                                                                                                            | Rokt event                                                                   | Notes |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- |
| [`Order Completed`](/collect-data/tracking-plan/order-completed.md)                                                    | `purchase`                                                                   |       |
| [`Signed Up`](/collect-data/tracking-plan/signed-up.md), [`User Created`](/collect-data/tracking-plan/user-created.md) | `signup`                                                                     |       |
| [`Subscription Created`](/collect-data/tracking-plan/subscription-created.md)                                          | `subscription`                                                               |       |
| Page views                                                                                                             | `screen_view`, sent through Rokt's page view call (API Key integration only) |       |

On the Account ID integration, page views are not sent: Rokt's offer-selection call is the only entry point it has, and asking for a placement on every page is not what it is for. Conversions are sent identically on both.

**Anything not in that table is skipped**, and the skip is written to the browser console so you can see it happened. Use **Custom Event Mapping** to route an additional event onto one of the four conversion types — for example `Trial Started` → `subscription`. A mapping naming anything outside those four values is ignored.

If the Rokt Events API destination has been enabled for your store, **configure the same mapping on both**. Otherwise the same conversion is classified one way in the browser and another way from the server.

{% hint style="info" %}
Rokt's public documentation describes `conversiontype` as free text and lists further example values elsewhere, without publishing a definitive set. Chord sends only the four above until Rokt confirms which values their reporting acts on. If you need another one, ask your Rokt account manager to confirm it and we will add it to both destinations together.
{% endhint %}

## Identity and user attributes

Rokt matches a conversion to a campaign on the shopper's email address, so a conversion without one will not attribute.

The address is lowercased and trimmed before it is sent, which is the same rule Rokt specifies before hashing. That means switching **Email Format** does not change which shopper Rokt resolves — only whether the address is readable in the page's network traffic.

Alongside the email, Chord sends Rokt's recommended user attributes when your events carry them — first name, last name, mobile number, city, state and postal code — each with its SHA-256 counterpart where Rokt defines one. Rokt's own canonicalization rules are applied before hashing: lowercase and trim for email and names, digits only for the mobile number.

The Rokt Click ID needs no configuration here. Rokt's SDK captures it itself when it initializes and attaches it to conversions.

## Deduplication

Rokt deduplicates on `confirmationref`, and both Rokt destinations send the same value. See [How they deduplicate](/activate/event-streaming/destinations/advertising/rokt.md#how-they-deduplicate).

## Custom properties

Rokt accepts custom attributes on a conversion, so any property mapping you configure is forwarded alongside the standard attributes. Use a bare property path in the mapping's destination field.

Mapped properties cannot overwrite the attributes Rokt defines itself — `conversiontype`, `confirmationref`, `amount` and `currency` are reserved and always carry Chord's computed values.

## Empty carts

An `Order Completed` with no products does not fire a conversion. An empty purchase is almost always a tracking fault rather than a real order, and reporting it inflates Rokt's conversion count with something you cannot reconcile.

## Content security policy

If your storefront enforces a Content Security Policy — every Hydrogen storefront does by default — Rokt will not load until these hosts are allowed. The symptom of a missing entry is a destination that looks connected and sends nothing.

| Directive     | Hosts                                                                                  | Needed for                                    |
| ------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- |
| `script-src`  | `https://apps.rokt.com`, `https://apps.rokt-api.com`, `https://apps.roktecommerce.com` | loading the SDK                               |
| `connect-src` | `https://apps.rokt.com`, `https://apps.rokt-api.com`, `https://apps.roktecommerce.com` | sending conversions                           |
| `frame-src`   | `https://apps.rokt.com`                                                                | the offer placement, which renders in a frame |
| `font-src`    | `https://apps.rokt.com`                                                                | the icon font the placement uses              |

`apps.rokt.com` serves the Account ID integration; `apps.rokt-api.com` and `apps.roktecommerce.com` serve the API Key one. Allowing all three covers either, and costs nothing if you only use one.

`apps.roktecommerce.com` is Rokt's documented fallback host — the API Key SDK retries there when the primary CDN is blocked, so omitting it removes the fallback that keeps the pixel working behind some ad blockers.

**`frame-src` and `font-src` are only needed for the Account ID integration**, and only because it renders an offer. They are not in Rokt's published CSP guidance — we found them by watching the network tab during a live conversion, where the placement pulled an HTML document and `rokt-icons.woff` from `apps.rokt.com`. If your policy does not set `font-src` explicitly it will inherit your `default-src`, which may already permit it.

Your storefront team applies this, usually in a different repository from your Chord configuration. If you use a Rokt first-party collection domain, allow that host too.

This list was confirmed against a live storefront for the Account ID integration. The API Key integration's hosts come from Rokt's published guidance and have not been exercised live, so treat those as a starting point and check the browser console for violations on your first test.


---

# 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/advertising/rokt/rokt-pixel.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.