Do you some­times beg your microwave to cook stuff faster? Be hon­est. You’ve done this before, haven’t you?

In today’s world of microwave ovens and fast food restau­rants, instant mes­sag­ing and tex­ting, and any answer you need (whether right or wrong) avail­able on the Web, we have come to expect instant grat­i­fi­ca­tion, per­haps even beyond what is rea­son­able. Of course, this extends itself to trou­bleshoot­ing and debug­ging your Web site as well. We need to try some­thing, see the results, fix it, try it again, add some­thing, see it work, and change it again.

As you need to make changes to your site ana­lyt­ics, you may find your­self wait­ing on a code release cycle, unable to sim­ply add that prop, eVar, or plu­gin that will give you the action­able data you desire. Enter Adobe Tag Manager.

Warn­ing: tangent…

I’m going to fol­low a brief tan­gent here because I think it will help the over­all under­stand­ing of this post. Let’s take one sec­ond to under­stand how Tag Man­ager works (at a high level).

Instead of your page code load­ing the s_code.js con­fig­u­ra­tion file, when you are using Tag Man­ager you ref­er­ence a “loader” file. This loader file is really just a pointer to Tag Man­ager, ref­er­enc­ing a “con­tainer” (feel free to do air quotes on all of these quoted terms – it’s fun). The con­tainer in Tag Man­ager houses the code that you used to have in the s_code.js file, and the code library (code below the line – which you should never change) is added auto­mat­i­cally by Tag Man­ager. This is one of the advan­tages of using Tag Man­ager (there are lots of great rea­sons to use Adobe Tag Man­ager – see your Account Exec­u­tive for more info) – that the Site­Cat­a­lyst con­fig­u­ra­tion code now sits in an inter­face that a Site­Cat­a­lyst Admin can get to and update with­out hav­ing to get on IT’s to-do list. Cool.

OK – I think we can call this the end of the tan­gent. We now return you to your reg­u­larly sched­uled programming.

So we’re excited to be using Tag man­ager. Got it. How­ever, have you noticed that every time you make a change to the s_code in Tag Man­ager, you have to wait sev­eral min­utes for the file to deploy to the servers around the world? What to do? I have just the thing for you.

Using Charles and Adobe Tag Manager

I’m sure that other packet snif­fers have a sim­i­lar func­tion, but in this arti­cle, I’ll show you how to use Charles and the “Map Local” func­tion to get around hav­ing to wait for deploy­ment of your Tag Man­ager file every time you make a change.

Sav­ing the file from Tag Manager

  1. First, we’re going to put com­ment “mark­ers” in the Site­Cat­a­lyst s_code so that we know what stuff to copy back in – Just trust me on this, you’ll thank me later.

 …  

  1. Next, copy all of the code from the con­tainer in Tag Man­ager (using the Pre­view func­tion). This includes any­thing at the top that looks “Tag Manager-ish” as well as the “code blow the line” at the bot­tom
  1. Save it into a file on your machine

Map­ping to the local file in Charles

  1. In Charles, find the ado­be­tag JS file, after load­ing your site.
  1. Right-click and choose “Map Local.”
  2. Point it to your saved JS file that is hold­ing your s_code.

 

  1. Now, as long as Map Local (and your spe­cific rule) are enabled, you will be able to make changes to the local s_code, and see those changes right away. Just like Mr. Pibb + Red Vines, that’s crazy delicious.

OK, I’m done testing…now what?

  1. After you’re done test­ing all of your changes, and are happy with it, you can now copy the file back into the Tag Man­ager con­tainer and deploy it (in any of the envi­ron­ments – Dev, Stage, or Live). But here’s where step 1 is going to come back into play…Assuming you just changed Site­Cat­a­lyst stuff, and not any depen­dent code from Tag Man­ager, or code addons (in other words, assum­ing you only changed stuff between our com­ments that we put into the code in step 1), you can now copy ONLY the code between our handy-dandy com­ment codes, and paste that back into the Site­Cat­a­lyst code block in Tag Manager.

// TOP OF SITECATALYST CODE IN TAG MANAGER

[All the changed code is here and waiting for you to copy it]

// BOTTOM OF SITECATALYST CODE IN TAG MANAGER

 

Well, I hope you like this tip. Once you get used to it, you will love hav­ing that quick response to your changes as you test new track­ing solu­tions on your site. It’ll be as sweet as pop­ping those pizza rolls in the micro and hav­ing them out in a minute. It’s like… magic.

0 comments