Mastering Adobe Launch Debugging with Requestly


Adobe Experience Platform Data Collection Tags Launch is Adobe’s tag management solution, or TMS. (Sorry, Adobe product folks, you can change the name internally, but not in my brain.) If you’ve worked with Launch for any period of time, you’re likely familiar with how difficult it can be to debug. In this post I’m going to walk through how to use Requestly to ease some of the pain.

Launch (codenamed Reactor) enables quicker deployment of marketing technologies by providing non-technical end users with a means to circumvent common enterprise IT bottlenecks. Its beating heart is a rules engine codenamed Turbine. Users log into Launch, create rules, add tags to those rules, test them (ideally), and then deploy them to the live site. All without a degree from Stack Overflow University (although having one helps).

A diploma from Stack Overflow University
Well worth the investment

One feature Launch unfortunately doesn’t include is some kind of intuitive mechanism for validating tagging you’ve set up. There’s no equivalent to Google Tag Manager’s Preview Mode. So how do you make sure your tagging is working as expected on the website you’re trying to tag?

Requestly is a great tool for this.

Why we need to swap environments

What is a Library?

A library in Launch parlance is a collection of tagging changes, sort of like Workspaces in GTM. Putting your changes into libraries makes it easier for Launch to build all your changes to each environment in the publishing workflow. Think of it as a serving tray at a restaurant — it’s easier for the server to bring you all your food when it’s all on one tray.

Libraries also implicitly include the last-published versions of all other assets in a Launch property.

What is an Environment?

Environments are simply endpoint URLs to which libraries can be built. Each environment has an endpoint URL associated with it. When a Launch embed snippet loads on the page, it calls whatever endpoint URL is included in the src attribute. Whichever library is built to that environment will be the library that loads on pages that have the embed snippet that corresponds to that environment.

Launch properties typically have three environments:

  1. Development
  2. Staging
  3. Production
The Publish Workflow screen in Launch
The Publish Workflow screen in Launch

Properties can have multiple Development environments, but only one Staging and one Production environment. These environments correspond to Adobe’s recommended tag management workflow.

Why we need to swap environments

So this is where it gets tricky. There will inevitably be times where you need a different Launch library to load on the page:

Whatever the case, there needs to be a way to effectively “swap out” the Launch environment that loads on the site you’re testing.

Traditional methods

Web debugging proxy

Debugging proxy software like Charles or Fiddler allows you to intercept and modify network requests. These are powerful tools that basically create a forward proxy on your device through which all traffic gets routed.

Charles Proxy
Charles Proxy

Because of how they work, they require elevated privileges to install, and can have interesting side effects if they’re not configured correctly or the software crashes. They are still a great method for debugging traffic on mobile devices, but on desktop, browser extensions have largely taken over as the preferred method for modifying network requests.

Browser extensions

Browser extensions work differently: they’re contained by the browser, so they don’t need admin privileges to install, and they don’t create a forward proxy on your device. (They are restricted to the browser though, so they don’t work for mobile app debugging.)

Adobe provides a browser extension called Adobe Experience Platform Debugger. This extension is kind of a swiss army knife for debugging Adobe SaaS products, so it’s kind of heavy, but it does allow you to swap out libraries fairly easily. If you also need to debug Analytics or Web SDK requests, this works quite well.

Adobe Experience Platform Debugger
CLICK THE LOCK! CLICK THE LOCK!

However sometimes it’s a little cumbersome to work with:

Getting Started with Requestly

I’ve tried many tools for swapping environments. The tool I keep coming back to is Requestly.

Requestly

Requestly is a lightweight browser extension which allows you to intercept and modify network requests. It was built by Adobe alumni who needed a quick and easy way to replace Adobe DTM tags, opt into Adobe Target experiences, etc. It does what you need and gets the eff out of your way. That’s important to me.

Step by Step Guide

1. Install browser extension

Head on over to requestly.com and install it in your browser. Requestly offers extensions for Chrome, Edge, and Firefox, so take your pick.

2. Sign up for an account

This is a lifesaver if you’re working on multiple devices — it keeps everything in sync. It also helps Requestly’s incredible team understand better who’s using it so they can make it even better.

3. Set up your first rule (Redirect Request)

Go ahead and click Redirect request from the main screen.

Requestly onboarding screen
Let's get this party started!

The main screen is a little intimidating the first time you use it, but just focus on the two fields here:

Create Redirect screen
Here's where the magic happens
  1. In the first field, copy & paste the URL of the Launch environment you’re trying to replace.
  2. In the second, copy & paste the URL of the Launch environment you want to replace it with. You can get this by going into Launch, navigating to Environments, and clicking the little package icon all the way to the right next to the name of the destination environment.
Launch Web Install Instructions modal
Where to find the URL

Then click Save Rule. That’s pretty much it. You just created your first rule!

4. Enable the rule

Your new rule should be enabled by default, but if it isn’t, click the toggle to enable it. (You probably guessed already, but you can disable rules by toggling them off.)

5. Navigate to the site

Head on over to any site that loads the Launch environment you’re swapping out.

6. Check that it worked

When a Requestly rule matches, the extension icon turns green (nice) and you’ll even get a little reminder that a rule was applied (super helpful).

Requestly extension rule applied notification
Now that's what I call feedback!

Now get to debuggin’!

Advanced Techniques and Use Cases

The only feature you really need for swapping Launch environments is Redirect Requests. The free plan gives you up to 5 rules (up to 3 can be active at a time). If all you’re doing is swapping Launch environments, then you’re set.

However, after using Requestly for a while (and liking it), I checked out all the other things it can do, and I was amazed.

Make Launch debugging easier

Did you know that Launch builds generate not one but two files? One is the minified version that’s smaller and meant for production:

The Minified version of the Launch library
The Minified version of the Launch library

But Launch also builds an un-minified version which is MUCH easier to set breakpoints in:

The Un-minified version of the Launch library
The Un-minified version of the Launch library

One of my favorite uses for Requestly is simply swapping out the minified version for the un-minified version. This makes debugging so much easier.

Requestly rule to swap minified for un-minified
Swap out the minifed version for the un-minified version

Map local or remote resources

Sometimes I need to swap out a resource on a client’s website with a file on my local machine—like if I want to see how a snippet of data layer code works, or mock up some quick styling changes. If you’re like me, you might have trouble keeping track of your Chrome Devtools overrides across all your Google accounts. Requestly offers local and remote resource mapping so you can keep them all in one place.

Modify headers

Sometimes I need to tweak one (or more) of the HTTP headers passed in a request: to set or modify a cookie server-side, add an authentication token, update CDN caching, or even bypass CORS policies. You can easily add and modify headers with Requestly.

Modify headers
Modify headers

Modify query parameters

There are times when I want to pass in a query parameter to modify a GET request or add a flag to turn on code that only runs when I’m debugging. This is a quick and easy way to automatically add query params to URLs.

Modify query parameters
Modify query parameters

Recordings

Ever struggle to explain a bug you’re seeing on the site? Make a recording and send it to your developers.

Recordings
It works on my machine ¯\_(ツ)_/¯

Check out the example recording to explore this handy feature.

API client

If you need a quick in-browser replacement for Postman, check out Requestly’s built-in API client!

API client
API client

So far I’ve focused on features that are included with the free plan, but if you’re willing to pay a little extra, here are some of the cool things you can do with paid plans:

Team Workspaces (Basic plan)

When I worked at Search Discovery Further, I would share redirects and snippets with my teammates using Team Workspaces. This made it much easier to get colleagues up and running.

Check out this video for a quick overview of Workspaces:

Insert JS (Lite plan)

Sometimes I want to add an event listener on page load that shows some debugging info. This is cumbersome to do with just Chrome devtools alone. Requestly lets you inject JS directly into the page. You can also inject CSS to test basic styling changes. This requires at least the Lite plan.

Inject JS
Inject JS

Conclusion

Adobe Launch properties can be tricky to debug. There are lots of tools out there to help, but in my experience, Requestly is the easiest and most useful. While Requestly lets you easily swap out Launch libraries, this post only scratches the surface of what’s possible with Requestly.

I also want to mention that the Requestly team is just awesome. Sachin, the founder, is a genuinely kind and helpful person. He once spent hours trying to help me get a Playwright test working in an environment that was not friendly to headless browsers. Not related to Requestly, just wanted to help. He’s brilliant, patient, and giving, as is everyone else at Requestly with whom I’ve interacted.

Resources