Guides

⚡

Custom Event Trigger

Fire your Experience Lab experience from any Adobe Tags rule — no direct CSS selector required.

The Custom Event trigger tells the Experience Lab script to wait for a named JavaScript event to be dispatched on the page. You control when that event fires — typically from an Adobe Tags Custom Code action. This two-part setup gives you the full power of Tags conditions, data layer access, and complex firing logic without writing any trigger code inside the experience itself.

Custom Event vs. Element Click

Factor	Element Click	Custom Event
Setup	Enter one CSS selector — done	Configure EL + create a Tags rule
Firing conditions	Selector must match the clicked element	Any Tags condition (URL, data layer, cookie, device…)
Data layer access	No	Yes — read _satellite variables in the action
Works on SPAs	Yes — uses MutationObserver	Yes — dispatch from your router or push handlers
Best for	Simple clicks on a single, stable element	Cart events, checkout steps, multi-condition targeting

💡Quick rule of thumb

If you can point to a single stable CSS selector and have no extra conditions, use Element Click — it's simpler to set up. Use Custom Event when you need Tags conditions, data layer values, or want to reuse an event across multiple experiences.

How it works

1 — Experience Lab script (DOM Ready)

The generated script runs at DOM Ready and registers a listener on window for your named event. It waits silently until the event arrives.

window.addEventListener(
  'el:addToCart',
  function(){ show(); }
);

2 — Adobe Tags rule (on user action)

A separate Tags rule fires when the visitor triggers whatever interaction you define. Its Custom Code action dispatches the named event, which the waiting EL script catches instantly.

window.dispatchEvent(
  new CustomEvent('el:addToCart')
);

📝Why window, not document?

Experience Lab listens on window. Make sure you dispatch on window too — dispatching on documentwon't be caught by the script.

Part 1 — Configure Experience Lab

Set up your experience first. The event name you choose here is what you'll paste into the Tags rule in Part 2.

Set Trigger Type to Custom Event

In the Configurator tab, find the Trigger section and select Custom Event from the dropdown. An Event Name field appears below it.

Enter a namespaced event name

Type a descriptive name for the event — for example el:addToCart or el:checkoutStart. The el: prefix is a convention to avoid accidental collisions with browser built-in events. The name is case-sensitive.

Finish configuring and generate the script

Set your content, frequency, and styling, then click Generate Code. Copy the output — you'll paste this into Adobe Target or a Tags rule at DOM Ready.

💡Consistent naming saves debugging time

Pick a naming convention and stick to it — el:camelCase is a clean default. Keep a note of each event name so your Tags developer and your Target practitioner stay in sync. Mismatched casing is the most common reason this trigger silently fails.

Part 2 — Create the Adobe Tags rule

Create (or reuse) a Tags rule that fires on the interaction you want to trigger the experience. The rule's action dispatches the custom event that the Experience Lab script is listening for.

Open Adobe Tags → your property → Rules

Go to data.adobelaunch.com (or Experience Platform Data Collection), select your Tag property, then click Rules in the left nav. Click Create New Rule and give it a descriptive name — e.g. EL — Upsell Modal on Cart Add.

Add an Event — the interaction that triggers the experience

Click + Add under the Events section. Choose Extension = Core, Event Type = the interaction you want (Click, Change, Custom, etc.). For a button click, use Click and enter the CSS selector for the element. You can also add Conditions to restrict which pages or visitors trigger the rule.

Add a Custom Code action

Click + Add under Actions. Choose Extension = Core, Action Type = Custom Code. Make sure Language is set to JavaScript.

Paste the dispatch snippet and click "Save"

In the code editor, paste the one-line dispatch shown below. Replace el:addToCart with the exact event name you entered in Experience Lab. Click Save to close the editor, then Save to Library on the rule.

Publish to Development and test

In Publishing Flow, build your working library and publish to Development. Load your page with the Target activity active (or via QA link) and trigger the interaction. The experience should appear. Once confirmed, promote to Staging then Production.

1Under Events, click + Add— choose Core > Click and enter the CSS selector for the element that should trigger the experience

2Under Actions, click + Add— choose Core > Custom Code and paste the one-line dispatch snippet

experience.adobe.com/#/@org/data-collection/tag-manager/properties/…/rules/…

AData Collection

Properties›My Website›Rules›EL — Upsell Modal on Cart Add

Rule Name

EL — Upsell Modal on Cart Add

Events1

Core—Click#add-to-cart

Conditions0

No conditions — rule fires on every matching click

Actions1

Core—Custom CodeJavaScript

window.dispatchEvent(new CustomEvent('el:addToCart'));

* Order matters — The Experience Lab script (the DOM Ready rule) must fire before the dispatch rule. DOM Ready always runs before click events, so this ordering is guaranteed.

The dispatch snippet

Paste this into the Tags Custom Code action. Replace the event name with the one you configured in Experience Lab.

Adobe Tags — Custom Code action

// Dispatch the custom event that Experience Lab is listening for.
// Replace 'el:addToCart' with your exact event name — casing matters.
window.dispatchEvent(new CustomEvent('el:addToCart'));

Need to pass data along with the event? Use the detailoption. The Experience Lab script doesn't read detail, but it's useful if other scripts on your page also listen for the same event.

Optional — with detail payload

// Pass extra context in the event detail (optional).
// Experience Lab ignores it, but other listeners can read event.detail.
window.dispatchEvent(new CustomEvent('el:addToCart', {
  detail: {
    productId: _satellite.getVar('product_id'),
    price: _satellite.getVar('product_price'),
  }
}));

Test before publishing

You can fire the event manually from the browser console to verify the Experience Lab script is listening correctly — without needing to trigger the Tags rule.

Browser console — fire the event manually

// 1. Load your page with the Target activity active (QA link or live)
// 2. Open the console (F12 → Console)
// 3. Paste and press Enter — the experience should appear immediately

window.dispatchEvent(new CustomEvent('el:addToCart'));

✅ Working correctly

The experience appears immediately after running the snippet. Console shows no errors.

❌ Nothing appears

Check the event name exactly — casing matters. Confirm the Target activity is active and the EL script is running (look for it in the Network or Sources tab).

⚠️The experience only fires once per page load

The listener uses {once: true}— it fires the first time the event is dispatched, then removes itself. Running the console snippet a second time on the same page won't trigger it again. Reload the page to reset. Your frequency setting then controls whether the experience actually appears.

Common use cases

Use case	Tags event type	Event name suggestion
Show upsell modal after Add to Cart	Core — Click on #add-to-cart	el:addToCart
Show exit offer when checkout abandoned	Core — Click on .checkout-close	el:checkoutAbandon
Fire banner when video reaches 50%	Custom — video progress event	el:videoHalfway
Show modal on form submit error	Core — Custom Code reading form state	el:formError
Trigger after data layer push (GTM-style)	Core — Custom Code after dl.push	el:dlPush:purchase
Show experience to high-value segment only	Core — Click + condition on data layer var	el:highValueClick

📝Re-using a Tags rule across multiple experiences

You can dispatch the same event in multiple Tags rules, or add multiple dispatch actions to one rule. Each Experience Lab script listens independently — dispatching el:addToCartwill trigger every active script that's configured with that event name. Use distinct names when you need separate experiences to fire independently.

⚡ Need help wiring Tags rules to your experiences?

Our team can build and audit your Adobe Tags implementation — from rule architecture and data layer design to end-to-end testing with Adobe Target.

Talk to us about Adobe Tags