Charles’ “Replace” is a Winner!

Remember when I wrote an Ode to Charles & Map Local?

At the time, I wasn’t using DTM a lot. Map Local was the top feature I needed, allowing me to test changes I made to an s_code.js file on a live site without causing any harm to innocent bystanders.

These days, I use DTM a lot, and the testing is built-in, using the Switch plugin.

But Charles hasn’t outlived its usefulness, oh no! It has one more amazing trick up its sleeve, which Andreas Kaufmann pointed out to me a couple of days ago — “Replace”

When do I need it?

Recently, I have worked with a lot of clients in the financial services industry in Switzerland. They have some pretty stringent expectations and rules on what data can go outside the country, to put it mildly. If you have never discussed privacy laws with a client, don’t start in Switzerland!

They also are very strict with the security of their sites.

The aspect that interferes with my work is the question of where to host the Javascript that DTM generates.

Usually, DTM generates a bunch of Javascript files, which are then served through Akamai and referenced directly as such on the pages of the site. I’m sure you have seen the assets.adobedtm.com host in the header of your pages.

Swiss banks don’t do that. They want the Javascript to be checked first, then hosted locally.

Consequently, the usual setup includes some process to download the JS (DTM calls that “Library Download”), have someone sign it off, then put it live.

Now that puts me in an awkward position.

When I change something in DTM, it might take time to actually end up on the site, meaning there is no way I can test it!

Ouch.

But!

Charles’ “Replace” feature is exactly what I need!

How do I do it?

Thankfully, you can setup DTM so that it serves the Javascript via Library Download and via Akamai!

That means you could build a test page referencing the hosted DTM library and test your modifications there.

Good, but we can do better.

Charles comes with a mechanism that allows you to replace stuff. Any kind of stuff.

Here is how I use that.

Let’s say we have a page that loads DTM from a local copy of the library, like so:

The only thing I would have to change to be able to use the library directly from DTM, would be to change that to:

I want to do that while the page zips through the Interwebs, or at least before it arrives in the browser. Charles, being a proxy, sounds like a good place to do the substitution.

So, launch Charles, then hit CTRL-SHIFT-E (or whatever you weird Apple people have to press).

You’ll see the “Rewrite Settings” dialog, in which you can setup rewrite rules.

What those rules can do is to replace any part of the HTTP traffic with anything you want.

I use it to replace the line in the HTML page that loads DTM from the customer’s server with the code that loads it straight from assets.adobedtm.com.

And here’s your step-by-step guide on how to make such a rule.

Step 1 — CTRL-SHIFT-E

Step 2 — tick the “Enable Rewrite” box

Step 3 — hit the “Add” button on the left to create a new Rewrite Set

Step 4 — give your set a name (preferably a better one than mine)

Step 5 — add a location (click the “Add” button underneath the upper empty box)

Step 6 — specify your location. Host and path are the minimum, wildcards are ok.

Step 7 — add a rule (click the “Add” button underneath the lower empty box)

Now this screen can probably be a bit intimidating at first. Or even at the 10^th or 1000^th time, so let me walk you through it.

Step 8 — select the “Type”.

We want to replace some stuff inside the HTML, so we choose “Body”.

Step 9 — untick “Request” and tick “Response” in the “Where” box.

We want to modify the HTML that is sent back to the browser, so that must be the response.

Step 10 — find the line of code in your page that loads DTM from the local server, copy it.

Step 11 — copy that line into the “Value” field in the “Match” box

Step 12 — in DTM, copy the “header code” (the code that you would usually put into your page)

Step 13 — paste that into the “Value” field in the “Replace” box

Step 14 — hit “Ok” to get back to your set

Step 15 — hit “Ok” again to dismiss the dialog

And you’re done!

From now on, the pages on our location will come back into our browser with the line loading DTM pointing to the live and direct version of DTM’s code.

Notes

You can temporarily switch sets off, they have tick boxes.

You can use this feature for all sorts of other things, too. Modify URLs, parameters, header values, cookies, … anything you can think of, really.

And the absolute kicker: you can export sets, hand them to colleagues or clients, and they can import them into their version of Charles and immediately start using them!

How’s that for a consultants tool?