Testing Adobe DTM using Charles Proxy

I'm going to quickly show you how you can start using all the cool features of Adobe Dynamic Tag Manager in less than 5 minutes. We're going to do this using Charles Proxy, for those of you not familiar with Charles Proxy, it's an HTTP proxy /monitor / Reverse Proxy, one of the coolest features is it's rewriting capability that allows you to "fake" making changes to your live website - this will allow us to add DTM in no time! Prerequisites are that you have Charles Proxy and Dynamic Tag Manager (if you don't have access yet - contact your account manager).

Step 1) Login to DTM and after you have added a new property, go to the "embed" tab to access the Header and Footer code. I'm only using the Production code. It will look something like this for the header:

<script src="//assets.adobedtm.com/cb442236e8fbb669a07de6df8af5f191b2203455/
satelliteLib-aff16ca4897413887b57a00e881397b3ebeb3f42.js"></script>

And the footer:

<script type="text/javascript">_satellite.pageBottom();</script>

Step 2) Next we open Charles Proxy and go to: Tools > Rewrite > Add. From here we rewrite the HTTP response we receive from your website which allows us to add the Header and Footer DTM code whenever we have Charles Proxy open. I've named the rule DTM and added the location which should be your website address.


Step 3) Within the rules section create a "Body" rule where we match the opening head tag of your page and replace with the DTM code and the head tag prepended:


Step 4) Create another "Body" rule and this time we match the closing body tag and replace with the 2nd part of our DTM code and concatenate the closing body tag:


5) If you already have Web Analytics tracking on your page such as a reference to your s_code file, you'll probably want to remove it. In this example we have Adobe Tag Manager (the version prior to DTM), so we'll break the URL and prevent the code from executing:


Finally your DTM rule should look something like this:

Now when we open up your website and as if by magic, when we view your page source we can see the DTM code in the Header and Footer locations we specified, which means hours of endless fun playing with Dynamic Tag Manger. Here's a great place to start learning: https://outv.omniture.com/