Monday, January 5, 2015 #

Google Website Call Tracking undocumented debugger

I am tasked with implementing Google Website Call Tracking.  After writing code in an Unobtrusive JavaScript Library, I realized the Team did not have a live toll-free phone number with which to test my code.

Knowing how I would have written the call tracking library, I guessed that there was probably some way to debug or test code in this scenario.  I carefully read through the minified code, utilizing the Chrome Developer Tools and the Pretty Print functionality.  I even set a few break points to confirm what I felt was a way to trigger a debugger.

So what is the [workaround]?

The secret is to append #goog-wcm-debug to the Query String of the URL and reload the window.  That will load a hidden DIV into the DOM.  It’s hidden because the style is set to display: none.  There are also two buttons: Retry and Force.  I knew that the Force button was the one I needed.  See the screen shot below:

SNAGHTML3909ff5f

 

To unhide the DIV and the buttons is a simple matter of changing the style in the Styles Tab.  See the screen-shot below:

SNAGHTML390a778b

When you click on the Force Button it returns a default test number from the Google library.  You are then able to verify if your code works and actually replaces the numbers you want.

 

And voila!  Problem solved!

 
Technorati Tags: ,,,,,,
Windows Live Tags: Google Website Call Tracking,Unobtrusive JavaScript Library,Chrome Developer Tools,Pretty Print,Force and Retry Buttons,debug,debugger

Posted On Monday, January 5, 2015 1:04 PM | Comments (2)

Copyright © intermark

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski