Pixel via Javascript SDK (JS)

In this guide, you'll learn how to set up the Addressable Pixel using the Javascript SDK.

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 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 for the Addressable Pixel.

JavaScript Snippet

<!-- Addressable Pixel base code -->
<script>
!function(w, d){
    w.__adrsbl = {
        queue: [],
        run: function(){
            this.queue.push(arguments);
        }
    };
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://tag.adrsbl.io/p.js?tid=<<replace this text with your pixel id>>';
    var b = d.getElementsByTagName('script')[0];
    b.parentNode.insertBefore(s, b);
}(window, document);
</script>
<!-- End Addressable Pixel base code -->

Follow These Steps:

  1. Copy the JavaScript Base Snippet above.

  2. Paste the script inside the <head> tag where it will fire on every page.

  3. Replace <<replace this text with your pixel id>> (L12) with your actual Pixel ID from Step 1.

  4. Note: If your platform has Content Security Policy (CSP), you will need to configure our domains as well — If you're unsure, we're happy to help.

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

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.

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.

Code Syntax

window.__adrsbl.run(event_name, is_conversion, properties)

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.

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": "navigation bar" }
]);

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 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.

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.

Transaction Type
Example Use Case
Required Properties"
Code Examples

USD

  • Payments

  • Trading

  • Unique Transaction Identifier

  • Transaction Amount

window.__adrsbl.run('purchase', true, [
{ "name": "transaction_id", "value": "VAC123D432" },
{ "name": "transaction_amount", "value": 50 }
]);

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": "0x00..." }
]);

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" }
]);

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" }
]);

Follow These Steps:

  1. Follow the same steps as setting up a custom event.

  2. When it comes to defining Parameters, include the correct ones (from table).

  3. Contact Addressable for final validation and configuration.

Last updated

Was this helpful?