Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

Hi all,

 

I generally want to be able to debug JavaScript Code Extensions as easy as possible, so I like to output debug information to the browser console, by using the utag.DB function.
Yes, I know that anyone could enable the debug cookie and see that information, but I still do like to add it.

 

When creating JavaScript Code Extensions, I therefore almost alway use this minimal debugging "scaffold".

utag.DB("--- Extension: Test");
try {

    // Insert Extension code here

} catch (error) {
    utag.DB("--- Error - Extension: Test");
    utag.DB(error);
}

This will then give me information about the Extension name, when the Extensions runs, but also any unhandled JavaScript errors, also together with the name of the extension.

 

If I then create an Extension like this, but with "Pre Loader" scope, I include and use my own function, basically doing the same as the utag.DB function.

 

function tiqDebug(debugText) {
    var tiqDebugMode = document.cookie.toLowerCase().indexOf('utagdb=true') > -1 ? true : false;
    if (tiqDebugMode && debugText) {
        console.debug(debugText);
    }
}

How are you guys generally doing this?

Any comments and input will be much appreciated :-)

 

Best regards,

Peter

 

 

Best Regards
Peter
8 REPLIES 8
Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

Hello @pmeyerdk,

 

Thank you for the detailed post pmeyerdk. 

 

Per my review on the tealium utag.DB code, it looks very similar to the custom code you have posted here. 

 

Here is a quick tip i could share to verify the utag.DB code: Open Google Chrome Web Browser and open a website with tealium tags implemented. Use the "Text search across all sources" option(or click Ctrl+Shift+F) and search for the text "DB: function" to find the utag.DB function definition. Also you can find this function within utag.js by simply searching in utag.js file on page. 

 

Hope this helps understand the utag.DB function better.

 

Thanks

Abraham

 

 

Thanks & Regards
--------------------------------------------------
Abraham Easo
Principal Consultant
Numeric Analytics, LLC
Bartlett, IL (CST)
m: 980-422-2044
Abraham.Easo@numericanalytics.com | http://www.numericanalytics.com
Adobe Analytics Architect/Tealium Expert/Ensighten/Google Analytics Certified
Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

Thank you for the input!

 

But I do know how to use the utag.DB function.

Since utag.DB isn't available when Pre Loader scoped Extensions run, I made my own similar function for that purpose alone.
In Extensions not scoped to Pre Loader, I do use the normal utag.DB function, since it is available for use there.

 

Best regards,
Peter

Best Regards
Peter
Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

Hello @pmeyerdk,

 

Thank you for the additional inputs pmeyerdk.

 

Totally understand your point. Looks like Pre-loader scoped extensions are ran before the Tealium library runs so utag or its functions(utag.DB) are unavailable. 

 

I would wait and see if any other community experts or tealium contacts have additional alternatives to propose or we just have to live with the custom code you shared.

 

@kathleen_jo

 

Thanks

Abraham

Thanks & Regards
--------------------------------------------------
Abraham Easo
Principal Consultant
Numeric Analytics, LLC
Bartlett, IL (CST)
m: 980-422-2044
Abraham.Easo@numericanalytics.com | http://www.numericanalytics.com
Adobe Analytics Architect/Tealium Expert/Ensighten/Google Analytics Certified
Highlighted

Debugging JavaScript Code Extensions

Employee Emeritus

HHHhhhmmm... perhaps @per_lundqvist or @thyngster can weigh in? 

 

Maybe even @dan_george or @adrian_browning

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.
Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

I actually don't have an issue with my own described approach.
The reason for writing here, was more to share my approach with others, and possibly get to know how other people prefer to do stuff like this.

Best regards,
Peter Meyer

Best Regards
Peter
Highlighted

Debugging JavaScript Code Extensions

Employee Emeritus

Ah got it, @pmeyerdk! Thank you so much for sharing! Keep it coming!

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.
Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

I like this framework...  do you leave it in production code as well?  If so, then I can see it would speed debugging if an unexpected situation came up.  Thanks for posting your working concept @pmeyerdk!

Highlighted

Debugging JavaScript Code Extensions

Tealium Expert
Tealium Expert

Thank you @mitchellt :-)

I wanted to share, to hopefully get to know how others did something like this themselves.

 

Yes, I do leave in production as well, even though I know, that everyone could enable the debug cookie and see it.

As you mention, it makes it a lot easier to debug unexpected issues, at the time they might occur.

 

Very simple, and does the job.

Best Regards
Peter