> For the complete documentation index, see [llms.txt](https://addressable.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://addressable.gitbook.io/knowledge-base/event-tracking/addressable-pixel/pixel-via-javascript-sdk-js.md). # Pixel via Javascript SDK (JS) **In this guide, you'll learn how to set up the Addressable Pixel using the Javascript SDK.** {% hint style="warning" %} If you already have *Google Tag Manager (GTM)* set up, consider that [implementation path](/knowledge-base/event-tracking/addressable-pixel/pixel-via-google-tag-manager-gtm.md) as well. {% endhint %} ## Enabled with the Addressable Pixel Once set up, the following features become available*:* * **User Insights** — Insights into each of your users * **Clear Reporting** — In-Depth marketing & funnel reports * **Campaign Details** — Detailed attribution for paid campaigns *** ## Getting Started — *Required* ### Set up the Base Pixel The following steps will walk you through setting up the base pixel on your website or platform. This will enable attribution and additional insights for each of your users. If you need any help, please let us know. #### **— Step 1 —** *First, we need to get your Pixel ID for the next step* **Follow These Steps:** 1. Log into **Addressable** and click **Data Sources** 2. Select [**Addressable Pixel**](https://app.addressable.io/data-sources/addressable-pixel/events) then click on **Connect** 3. Copy the **Pixel ID** for the third step 4. Either keep this page open or paste the ID somewhere else #### **— Step 2 —** *Second, we need to add the official* [*Community Template*](https://tagmanager.google.com/gallery/#/owners/addressableid/templates/addressable-gtm-template) *for the Addressable Pixel.* **Follow These Steps:** 1. Copy the **JavaScript Base Snippet** below. 2. Paste the script inside the `` tag 1. Importantly, this code needs to fire on **every page** across the website, app, and landing pages. 3. Replace `REPLACE_PIXEL_ID_HERE` (Line 12) with your actual **Pixel ID** from Step 1. 4. If your platform has **Content Security Policy** (CSP), you will need to [**configure our domains**](https://addressable.gitbook.io/knowledge-base/integrations/addressable-pixel/configure-content-security-policy-csp) as well — *If you're unsure, we're happy to help.* {% hint style="warning" %} **Once installed**, the base pixel will automatically trigger a **Page View** and Wallet events on every page the script loads on. There's **no need** to track them manually. {% endhint %} #### **JavaScript Snippet** {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```javascript ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="success" %} **Congratulations** :tada: You successfully set up Page View and Wallet Connect events in Addressable. *Please allow up to 24 hours for these events to show up in our platform.* {% endhint %} ### Debugging Tools * You can see a live feed of event's logged by the Pixel every \~60 seconds. * This is also where you can access the [Troubleshoot Tool](https://app.addressable.io/data-sources/addressable-pixel/raw) as well. * *You can log back into **Addressable**, click on **Data Sources**, click on **View Events** under Addressable Pixel, and go to the* [***Raw Events***](https://app.addressable.io/data-sources/addressable-pixel/raw) *tab.* *** ## Custom Events & Revenue — *Advanced* For those who want additional insights and information within the Addressable Pixel, we allow you to set up and track Custom Events as well as Revenue. Custom events enable more in your Addressable dashboard by helping you measure meaningful user actions, identify drop-off points, and track conversions more precisely across your funnel. **Jump to:** * [Custom Events](#to-custom-events) * [Revenue Reporting](#to-revenue-reporting) ### Setting up Custom Events After setting up the Addressable Pixel, we recommend setting up **custom events** to better understand how users interact with your website or platform. {% hint style="info" %} It's recommended to define at least one custom event as a **conversion event** to get deeper insight on those who complete the most impactful events. {% endhint %} #### **Code Syntax** {% tabs %} {% tab title="JavaScript" %} ```javascript window.__adrsbl.run(event_name, is_conversion, properties) ``` {% endtab %} {% endtabs %} Parameters: * `event_name` *(string)* — A clear name of the event, displayed in Addressable * `is_conversion` *(boolean) —* Set to `true` if the event is a conversion; otherwise `false` * `properties` *(optional array of objects)* — Additional details and context about the event #### Tips for Each Parameter * **Event Name:** This is a clear name of the event that will be displayed in the Addressable Dashboard — for example `"signup"` or `"download_app"` . * **Conversion Events:** A conversion event is any meaningful action that represents progress in your funnel—such as completing a signup, starting a checkout, making a purchase. * **Optional Properties:** Each property is defined as an object with the keys of `name` and `value`. You can define up to 6 properties per event. {% hint style="danger" %} Reminder: You do **not** need to manually configure a 'Wallet Connect' event — these events are tracked automatically when the pixel is installed across all pages. {% endhint %} #### Code Examples This sends a **purchase** event, marks it as a **conversion**, and includes two properties: ``` window.__adrsbl.run('purchase', true, [ { "name": "transaction", "value": "VAC123D432" }, { "name": "amount", "value": 50 } ]); ``` This sends a **downloaded app** event that is **not** a conversion, and one property without a value: ``` window.__adrsbl.run('downloaded_app', false, [ { "name": "cta_location", "value": "navbar" } ]); ``` This sends a **primary click** event, marks it as a **conversion**, and did not include any properties: ``` window.__adrsbl.run('primary_click', true, ''); ``` #### Validate Configuration For proper funnel configuration, please configure at least two events: 1. Standard **Page View** event. 2. At least one **Custom Event** with `is_conversion` set to true. You can validate events are coming in through our dashboard, by selecting Data Sources then [Addressable Pixel](https://app.addressable.io/data-sources/addressable-pixel/events) then click on View Events then click Raw Events. *** ### Configure Revenue Reporting Enabling Revenue Reporting enables ROI tracking, User-level revenue, ROAS for campaigns, and more. {% hint style="warning" %} **Revenue tracking is sent using Custom Events** and follow similar steps to any other event set up. Events with revenue enabled still function the same as any other customer event but have this added feature. As such, a single event can serve a dual purpose for funnel tracking and revenue tracking. {% endhint %} #### Supported Transaction Type Examples When configuring a custom event, you can send additional Properties that include what's needed to configure Revenue Reporting. These are simply additional context sent along the event when it fires. Revenue must be reported in **one of the** **four types of transaction amounts**, each of which have thier benefits, but generally the USD is the recommended pathway. **The Four (4) Options for Transactions:**
Transaction TypeExample Use CaseRequired Properties"Code Examples
USD (Recommended)
  • Payments
  • Trading
  • Unique Transaction Identifier
  • Transaction Amount
window.__adrsbl.run('purchase', true, [
  { "name": "transaction_id", "value": "VAC123D432" },
  { "name": "transaction_amount", "value": 50 }
]);
Foreign Currency Exchange
  • Converting EUR to USD

  • Unique Transaction Identifier
  • Transaction Amount
  • USD Exchange Rate (at time of transaction)
window.__adrsbl.run('exchange', true, [
  { "name": "transaction_id", "value": "VAC123D432" },
  { "name": "transaction_amount", "value": 150 },
  { "name": "exchange_rate", "value": "0.870132" }
]);
Native Token
  • Value transfer between wallets
  • Staking
  • Unique Transaction Identifier
  • Transaction Amount
  • Network/Chain ID

window.__adrsbl.run('transfer', true, [
  { "name": "transaction_id", "value": "VAC123D432" },
  { "name": "transaction_amount", "value": 150 },
  {" name": "network_id", "value": "8453" }
]);
Contract Token
  • Stablecoin payments
  • DeFi interactions
  • Unique Transaction Identifier
  • Transaction Amount
  • Network/Chain ID
  • Token Contract Address
window.__adrsbl.run('payment', true, [
  { "name": "transaction_id", "value": "VAC123D432" },
  { "name": "transaction_amount", "value": 100 },
  { "name": "network_id", "value": "8453" },
  { "name": "token_address": "0x0000000000000000000000000000000000000000" }
]);
#### **Follow These Steps:** 1. Follow the same steps as setting up a [custom event](#config-custom-event). 2. When it comes to defining Parameters, include the correct ones (from table). 3. Contact Addressable for final validation and configuration. {% hint style="warning" %} Don't forget to contact your Customer Service representative to ensure your revenue events are properly configured and everything is set up on our end. {% endhint %} --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://addressable.gitbook.io/knowledge-base/event-tracking/addressable-pixel/pixel-via-javascript-sdk-js.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.