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:

[Screenshot]

DTM loaded locally

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

[Screenshot]

DTM loaded from DTM

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

[Screenshot]

Charles’ Replace dialog

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)

[Screenshot]

Specifying a location

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

[Screenshot]

Location is specified

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

[Screenshot]

Rewrite rule dialog – empty

Now this screen can probably be a bit intimidating at first. Or even at the 10th or 1000th 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.

[Screenshot]

Original DTM loader code

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

[Screenshot]

Rewrite rule dialog – upper half done

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

160516 replace value

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

[Screenshot]

Finished Rule 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?

About

German expat living in Switzerland (formerly UK and France). Consultant and member of the Multi-Solutions Group at Adobe, working with the Digital Marketing Suite. Father of 4 girls.

Tagged with: , , ,
Posted in DTM, Integration, Javascript, Tips
4 comments on “Charles’ “Replace” is a Winner!
  1. Lukáš Čech says:

    Quick useful tip: If you want to do this on a HTTPS website, you need to go to “Proxy > SSL Proxying Settings” and add the domain with 443 port into the list. And then visit the site and allow the exception to use the invalid certificate.

    Another caveat is when the SSL site also uses HSTS (https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security) – this will block the Charles’ attempt to substitute the SSL certificate if you were on the site previously and already had a valid one. If you want to bypass that, you need to go to chrome://net-internals/#hsts in your Google Chrome and delete the domain you want to play with.

    Like

  2. Bijan says:

    Simply awesome 😉

    Like

  3. Guillaume Hermans says:

    Good one!
    Alternatively, you could also use the “Requestly” Chrome add-on, to replace the local path to the Akamai one in the DTM request. Very handy!
    https://chrome.google.com/webstore/detail/requestly/mdnleldcmiljblolnjhpnblkcekpdkpa

    Like

  4. Tirupati Reddy Yeruva says:

    Good one

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 1,398 other followers

%d bloggers like this: