Deploying Breakout via Adobe Tags

Overview

The Breakout script is a lightweight, stable snippet that only needs to be added once — it won't change as new features are released.

If you're already using Adobe Tags to manage scripts on your site, this is the recommended approach for adding Breakout without touching your site's source code.

Prerequisites

Step 1: Open Your Adobe Tags Property

Sign in to Adobe Experience Platform at experience.adobe.com. From the left navigation, go to Data Collection → Tags. Select the property associated with the website where you want the Breakout agent to appear.

Step 2: Create a New Rule

In the left sidebar of your property, click Rules, then click Add Rule. Give your rule a descriptive name, for example: "Load Breakout Agent".

Step 3: Configure the Event (When to Load)

Under the Events section, click Add. Configure it as follows:

This ensures the Breakout script loads as early as possible on every page. Click Keep Changes.

Note: If you prefer the script to load later in the page lifecycle, you can choose "DOM Ready" or "Window Loaded" instead. "Library Loaded (Page Top)" is recommended for the best visitor experience since it allows the Breakout agent to be ready as soon as the page renders.

Step 4: Add the Breakout Script as an Action

Under the Actions section, click Add. Configure it as follows:

In the code editor that opens, paste the following snippet:

Replace YOUR_TENANT_ID with your company's Breakout tenant ID, and YOUR_AGENT_ID with the agent ID you want to deploy. You can find both of these values in your Breakout dashboard. Click Keep Changes, then click Save to save the rule.

Step 5: Build and Test in a Development Environment

Before publishing to your live site, you should always test in a lower environment first.

In the left sidebar, click Publishing Flow. Click Add New Library (or open an existing development library). Give it a name such as "Breakout Agent - Dev" and set the environment to Development. Under Resource Changes, click Add All Changed Resources to include your new rule. Click Save & Build to Development.

Once the build completes, you can test it by loading your site with the development embed code. To find your development embed code, go to Environments in the left sidebar, and click the install icon next to your Development environment. Use a browser extension like Adobe Experience Platform Debugger to confirm the Breakout script is loading and the agent widget appears on the page.

Step 6: Approve and Publish to Staging

Once you've confirmed everything works in Development, return to Publishing Flow. Click the arrow on your library and select Submit for Approval. After approval, click Build for Staging. Test again using your staging environment embed code to verify the agent loads correctly in a production-like setting.

Step 7: Publish to Production

When you're satisfied with staging, return to Publishing Flow and click Publish for your library. The Breakout agent will now be live on all pages served by your production Adobe Tags embed code.

A Note on Page Targeting

Breakout includes built-in controls that let you configure which pages the agent appears on directly from the Breakout dashboard — no additional Adobe Tags configuration required. This means you can deploy the script globally through Adobe Tags and manage page-level visibility entirely within Breakout.

However, if your team prefers to manage page targeting at the tag management level, you can add conditions to your Adobe Tags rule. To do this, open your "Load Breakout Agent" rule, click Add under the Conditions section, and configure it as follows:

You can combine multiple conditions to include or exclude specific pages. This approach gives your Adobe Tags administrators control over where the script fires, but keep in mind that any page restrictions set in Adobe Tags operate independently from the controls within Breakout.

Troubleshooting

If the Breakout agent doesn't appear after publishing, check the following: