Debug Guide For Web Analytics And Tag Management

GA Debugger is the official Universal Analytics, Google Analytics 4, and Google Tag Manager debugger. It outputs information about the ... SimoAhava Husband|Father|Analyticsdevelopersimo(at)simoahava.com Home Categories Tags GTMTips About RSS Tools Blogstatistics GitHub Upcomingtalks Templates Newsletter DebugGuideForWebAnalyticsAndTagManagement January13,2022 in Analytics |Comments Oneofthekeyskillsforanyoneworkingwithwebanalyticsandtagmanagementisunderstandinghowtoidentifywherethingswentwrong,whytheywentwrong,andideallyhowtofixthem. Thereareplentyofexcellentbrowserextensionsforhelpingyoudebug,andwe’lldiscusstheseintheguide,too.Butmostofallwe’regoingtousebrowsers’owndevelopertools,astheyarealwaysthebestsourceoftruthforanythingthathappenswithinthebrowserwindow. Intheguide,we’lluseGoogleAnalytics4andGoogleTagManagerasexamples.However,theguide’stopicscanbeextendedtoanywebanalyticstoolsandtagmanagementsolutionsoutthere,becausetheusecasesareuniversal. X TheSimmerNewsletter SubscribetotheSimmernewslettertogetthelatestnewsandcontentfromSimoAhavaintoyouremailinbox! Browserdevelopertools Yourbestfriendindebuggingissueswithyourwebanalyticsandtagmanagementsystemsinthewebbrowserarethebrowsers’owndevelopertools. Developertoolsareasuiteofutilitiesthatyoucanusetoinvestigatevariousdifferentaspectsofthedynamicwebpagetheuserisinspecting. Theimageaboveliststhekeyboardshortcutsforopeningthedevelopertoolsinvariousbrowsersandoperatingsystems. NotethatonSafari,you’llwanttoopenSafari->Preferences->AdvancedandcheckthebuttonnexttoShowDevelopmenuinmenubar. AllofthebrowsersaboveutilizeasimilarsetofdevelopertoolswithjustsmalldifferencesintheUIandthechosensemantics.Themostusefultoolswe’llfocusonare: Theelementinspector,whichletsyoulookatthedynamicrepresentationofthewebpage(DocumentObjectModel).ThisisparticularlyusefulforinspectinginjectedtrackingscriptsandcustomHTMLelementsaddedbytagmanagementsolutions. Thenetworkdebugger,whichletsyouinspectandanalyzeoutgoingHTTPrequestssentfromthepage(orembeddedframes).Thisisoneofthemostimportanttoolsforyou,asitwilltellyouthetruthaboutwhatisactuallysentfromtheuser’sbrowser. TheJavaScriptconsole,whichletsyourunJavaScriptcodeinthecontextofthecurrentpage(orembeddedframe).VitalforrecognizingissueswiththeJavaScriptimplementationsofyouranalyticsscripts. Thesourcesbrowser,whichletsyoubrowsethroughtheJavaScriptresourcesloadedonthecurrentpage(orembeddedframes).GreatforidentifyingmismatchesbetweenwhatyouexpectedtheJavaScriptfiletocontainvs.what’sactuallycontainedwithin. Theapplicationstorage,whichletsyouinvestigatethebrowserstorage(cookies,localStorage,etc.)utilizedonthecurrentpage(orembeddedframes).Instrumentalforunderstandingwhysometrackersmightnotbeabletopersistdataconsistently. Inthissection,we’llwalkthroughthesedifferenttoolswithmoredetail,sothatyou’llhaveabetterunderstandingofhowtousethemtounravelsomeofthemorecomplicateddebuggingcasesyouruninto. Note!ThissectionusesmainlyChrome’sdevelopertoolsinexamples.It’spossibletheactualactionsare(slightly)differentinotherbrowsers. Elementinspector TheelementinspectorletsyouanalyzetheDOM(DocumentObjectModel)ofthepage. WhenthebrowserloadstheHTMLsourceitretrievesfromthesite’swebserver,itrendersitintoadynamictreemodel,accessibleviaJavaScript.ThisdynamicrepresentationistheDOM. Wheneverananalyticssnippetoratagmanagerinteractswiththepage,suchasbyloadingathird-partyJavaScriptlibraryoraddingaclicklistenersomewhere,theymodifytheDOM. Thus,ifyouhaveproblemswithyourimplementation,it’susefultosearchthroughtheelementinspectortofindwhattheissuecouldbe. Theelementinspectorisalsoextremelyusefulwhenyou’rebuildingtriggersorvariablesinyourtagmanagementsystemwiththepurposeofscrapingsomeinformationfromthepageoraddinglistenerstoandinjectingelementsintothedocument. Hereareacoupleofcooltricksyoucantryintheelementinspector. Searchforaspecificelementintheinspector HitCMD+F/CTRL+Ftoopenasearchbar.Youcanthensearchforastring(e.g.textcontent)oraCSSselectortohavetheinspectorlocateaspecificelement. Forexample,tosearchforallelementswiththeclassnamesimmer,youcantype.simmerintothesearchbarandtheinspectorwillreturnallthematches. Ifyou’reunsurewhetherGoogleTagManageractuallyaddedtheGoogleAnalytics4scriptonthepage,forexampled,youcouldsearchforgtag/jstofindallelementsthathavethatparticularstringsomewhereinthem.SinceGA4isloadedfromthe/gtag/js?id=G-...URL,theinspectorshouldfindtheGA4scriptelement,unlessit’sactuallymissing. Selectaspecificelementonthepageitself Youcanalsodothereverse.Ifyouclickthelittleelementselectoricon(thisdiffersfrombrowsertobrowser)inthedevelopertoolspanel,youcanactuallyselectanelementonthepagetorevealitintheelementinspector. Inadditiontopinpointingitintheelementinspector,thetoolalsodisplayssomeusefulinformationabouttheelementinquestion. Interactwiththeelementcontextmenu Whenyouselectanelementintheinspectorwiththerightmousebutton,you’llseeacontextmenu. Youcandoalotofcoolstuffwiththis,suchas: Add/edittheelement’sattributes.IusethisalottochangelinkURLstosomethingelse,whenIwanttotestaspecificoutgoinglink,forexample. Edit/deletetheelementitself.Sometimesit’susefultojustdeleteanelemententirely(e.g.anoverlaythathidesthepageunderneath).Andsometimesyou’llwanttoedittheentireHTMLstructureofanelementwhenyouwanttoaddnewcontentstoitfortestingaclicklistener,forexample. Copyselector,asthisletsyoucopyaCSSselectorpathtotheelementitself.ExtremelyusefulwhenconfiguringtriggersinGoogleTagManager,forexample.JustnotethattheCSSselectorpathisusuallyneedlesslycomplex,andyoucantrimitdowntobemoregenericinordertoavoidsubtlechangesintheDOMfrombreakingyourtriggers. Breakon…letsyoupausethepagewhenevertheelementoritssubtree(nestedelements)changes.Thisisprettyusefulwhenyouwanttoinspectwhathappenswhenanelementbecomesvisibleorwhenanelement’scontentisdynamicallychanged(thinkformvalidationerrormessages,forexample). Changeelementstyles Whenyou’veselectedtheelement,youcanchangetheassociatedstyleswiththedevelopertools. Thismighthavemarginaluseforanalyticsdebugging,butoccasionallyyoumightuseittomakeanelementvisibleormoveitaroundwhenyoucan’tfinditintheactualpage. Networkdebugger Oftenyou’llfindthatyourtagmanagementsystemand/oryouranalyticsdebuggerextensionclaimsthatyourhithasfired,butnodataiscollectedintothevendorendpoint. Atthispoint,youneedtoopentheNetworktabinthedevelopertools,asthislistsalltheHTTPrequestssentfromthebrowser. Thenetworkdebuggeristheultimatetruth.Ifarequestdoesn’tappearhere,thenthebrowserhasnotsentit.SoifyourtagmanagementsystemsaysthataGA4hithasfiredbutyouseenoevidenceofacollect?v=2requestinthenetworkdebugger,thenthehithasnotbeensent. ItmightbeusefultocheckthePreservelogoption,asthisdoesn’tclearthelogofrequestsbetweenpageloads.Thisisveryusefulwhenyouwanttodebugwhathappenedonapreviouspage. Foramoredetailedwalkthroughofthenetworkdebugger,checkoutthisexcellentresource. Herearesomeofthethingsyoucandowiththenetworkdebugger. Filterforspecificrequests Bytypingsomethingintothefilterfield,youcanshowonlytheHTTPrequeststhatmatchthefilter. ThefiltersearchesthroughtherequestURLandtherequestbody. Whenyouselectarequestinthedebugger,asmalloverlayopenswithvarioustabs. HeadersincludesalltheHTTPheadersoftherequestandtheresponse.Thisisusefulfordebuggingthingslikecookies,referrervalues,andwheretherequestwasactuallysent. Payloadcontainsthequeryparametersandtherequestbody.Extremelyimportantwhenanalyzingwhatwasactuallysenttotheanalyticsplatform. Responseshowswhatthewebserveractuallyrespondedwith.Thisisoftenemptyornonsensicalwithpixelrequests,butit’susefulwhenanalyzingAPIresponsesorJavaScriptfiles. Cookieslistsallthecookiesthatweresentwiththerequestandsetintheresponse. Blockarequestfromfutureloads Youcanright-clickanyrequestinthelistandchooseBlockrequestURLorBlockrequestdomaintopreventthepagefrombeingabletosendtherequestuntiltheblockisremoved. WhentheresourceURL(ordomain)isblocked,thenanyrequeststhatmatchtheURL(ordomain)willbeblockedinfuturerequests. ThisisextremelyusefulwhenyouwanttofigureoutwhichJavaScriptresourceiscausingconflictsonthepage.Byblockingeachone-by-oneandthenreloadingthepage,you’llbeabletopinpointthefilethatcausesissues. Tounblockaresource,presstheESCkeytotoggletheDrawer,selecttheNetworkrequestblockingtabandunchecktheboxnexttotherequest(ordeleteitfromtherespectivebuttons).Ifyoudon’tseethetab,youcanselectitbyclickingtheDrawermenu(thethreeverticaldots)inthetop-leftcorneroftheDrawer. Youcanalsoright-clicktheblockedresourceinthenetworkdebuggerandchooseUnblock…. Manuallythrottlethepagespeed Ifyouwanttotesthowthepageloadslikeonaslowerconnection(mightbeusefuleverynowandthen),youcanchooseathrottlingspeedfromthenetworktools. RemembertoswitchbacktoNothrottlingwhendone,though,oryou’llhavetocontinuesufferingwithslowlyloadingpages. Pinpointtheinitiatoroftherequest IntheInitiatorcolumn,youcanseetheresourceorprocessthatcausedtheredirecttofire. Byclickingtheresourceinthecolumn,itwilljumptotherelevantpartofthedevelopertoolstoshowwhatprocessinitiatedtherequest. Iftheinitiatoris(index),itmeanstherequestoriginatedfromaresourceinjectedintotheDOM,whichmeansclickingitwillopentheelementinspectorwiththeelementselected. IftheinitiatorisaJavaScriptfileoraCSSfile,forexample,thendevelopertoolswillopentheSourcestabwiththerelevantpartofthesourcefilecodeselected.Thismightnotbeveryusefulinitself,butyoucanusetheSourcespaneltoaddabreakpointtotheinjectionmomentinordertoreplaythroughthestackafterapagereload(moreonthisbelowintheSourcessection). JavaScriptconsole TheJavaScriptconsoleletsyouexecuteanyJavaScriptcommandsinthecontextofthecurrentpage. ThecontextofthepageistheDOM,andyoucanuseDOMmethodstointeractwithpageelements. HerearesomeusecasesfortheJavaScriptconsole. Inspectlogs ManytoolsoutputdebugmessagestotheJavaScriptconsole,sothefirstcourseofactionwheneveryourunintotroubleistoopentheJavaScriptconsoletoseeifthereareanyrelevanterrorsshown. It’sagoodideatoaddsomeconsole.log(msg)callsinwhatevercodeyouaddyourselfviaatagmanagementsystem,forexample.ThatwayyoucandebugthelogoutputintheJavaScriptconsole–oftenthisistheeasiestwaytodebugcodeexecution. Checkthevalueofglobalvariables InbrowserJavaScript,globalvariablesarestoredinthewindowobject. IfyouwanttocheckwhetheraglobaldataLayerarrayexists,youcansimplytypewindow.dataLayerandpressenter.Iftheconsoleshowsundefined,itmeansthatdataLayerdoesnotexistinglobalscope. Youcanalsosetnewglobalvariablessimplybyinitializingtheminthewindowobject: window.myGlobalVariable="Hello,Iamaglobalvariable."; Addaneventlistenerwithabreakpoint Thisisacooltrick.WheneveranyJavaScriptthatrunsonthepageusesthedebugger;keyword,thepagewillpauseandyouwillbedivertedtotheSourcestabwhereyoucanthenwalkthroughthestack(moreonthisbelow). Ifyouwanttotrythisout,youcanaddaclicklisteneronthepagewithdebugger;inthecallback.Then,whenyouclickanywhereonthepage,theexecutionwillpauseandyou’llbetakentotheSourcestab. window.addEventListener('click',()=>{debugger;}) Changethecontexttoaniframe TheJavaScriptconsoleisinitiallyboundtothecontextofthetopframe(theURLtheuseriscurrentlynavigating). Ifthepageembedsothercontentiniframes,youcanusetheframeselectorintheconsoletochangecontexttotheiframe. Thisis,ofcourse,particularlyusefulwhendebuggingembeddedcontentsuchasthird-partyshoppingcartsorwidgets. Notethattheframeselectorisconfusinglyindifferentpartsofthedevelopertoolsacrossdifferentbrowsers.ThescreenshotaboveisfromChrome(andit’sthesameonEdge).WithFirefoxthecontextpickerisinthetop-rightcornerofthedevelopertools,andwithSafariit’sinthebottom-rightcornerofthedeveloperconsole. Sources Thesourcespanelcanbegame-changingbutitcanalsobeveryoverwhelmingtouse. Thepanellistsallofthesubresources(images,scripts,frames,etc.)loadedonthecurrentpage. ThelistissortedbyURL,startingwiththeoriginandthendrillingowntopathsandfiles. Thesourcespanelwoulddeserveaseparatearticleinitselfduetothemany,manydifferentthingsyoucandowithit.However,hereI’velistedsomeofthemostusefulthingsyoucantamperwith. Openafile,pretty-printit,andsearchthroughit WhenyouopenaminifiedJavaScriptfile(astheytendtobeinordertosavespaceandbandwidth),thepanelpromptsyouifyouwanttopretty-printthefile. Alwaysdothis. Bypretty-printingthefile,thecodeisdisplayedinamorereadableformat,evenifthecodeitselfisstillminified. YoucanthenhitCMD+F(orCTRL+F)toopenthesearchbar.Thesearchwilllookthroughtheformattedfileforallreferencestothesearchedstring. Addabreakpointtothefile Abreakpointisaninstructionforthebrowertohaltpageexecutionandallowtheusertoseetheexactstateofthepageatthetimeofthebreakpoint. Toaddabreakpoint,openafileintheSourcespanel,right-clicktherownumberyouwanttohaltexecutiononandchooseAddbreakpoint. Whenyouthenreloadthepage(orcausethecodetobeevaluatedsomeotherway),thebrowserwillstopatthebreakpointandgiveyoubunchofoptionshowtoproceed. Someusefultoolshereinclude: LookthroughtheScopelist.HerearelistedallthevariablesinLocal(currentfunctioncontext)scope,Closure(scopeofthefunctionthatinitiatedtheclosurecode),andGlobalscope. WalkbackthroughtheCallStackmenu,asthiswillletyouinspectthefullexecutionthreadallthewaytowhereitwasinitialized.ThisisagreatwaytofindjustwheretheJavaScriptstartedbreakingdown. Usethestepmethods(seescreenshotbelow)tocontinueprogressingthroughthecode,pausingaftereveryline. Toremovethebreakpoint(goodideaonceyou’redonedebugging),expandtheBreakpointslistanduncheckthebreakpointsyouwanttodeactivate. Searchthroughthesources Sometimesitcanbeusefultosimplydoastringsearchthroughthesources.Forexample,ifyoufindGTM’sdataLayerisoverwritten,youcouldevensearchforsomethingassimpleasdataLayer=inordertofindifit’sbeenoverwrittenbycustomcodeinsomeotherfile. YoucanfindthesearchtoolbyopeningtheDrawer(pressESC)andselectingtheSearchtab.Here,youcandoastringsearchanddevelopertoolswillsearchthroughallthesourcefilesforamatch. Ifyoudofindamatch,youcanclickittojumptotherelevantpartofthesourcefile. Addlocaloverrides Thiscanbeextremelyhelpfulintestingyourpage.Youcanactuallyedit/add/removethingsinthepageHTMLorthelinkedJavaScriptresourcesbyaddinglocaloverrides. Whenyougivethebrowserpermissiontowritelocaloverrides,youcanthenfreelyeditanyofthefilesintheSourcespanel,savethem,andwhenyoureloadthepagethesavedandmodifiedfilewillbeusedinsteadoftheoneloadedoverthenetwork. InChrome,you’llseealittlepurplebuttonnexttothefileifithasalocaloverride. Tostopusingoverrides,justopentheOverridestabintheSourcespanelanduncheck“EnableLocalOverrides”. Applicationstorage Theapplicationstoragetabshowsallthebrowserstorageusedonthecurrentpage(andinembeddedframes). Thisincludesthingslikecookies,localStorage,andsessionStorage. Youcanusethistabtocreate,edit,anddeleteitemsinbrowserstorage. It’sagreatresourcetoidentifyproblemswithpersistenceinyouranalyticstools,forexample. Herearesomeofthethingsyoucandowithapplicationstorage. Inspectfirst-partyandthird-partystorage It’sabitconfusing,butyoucanseemultipledomainsinboththenavigationcolumnaswellasintheactualstoragelist. First,allthedomainslistedinthenavigationcolumn(simoahava.comandgtmtools.cominthescreenshotabove),representURLoriginsloadedinframes.Forexample,inthiscasesimoahava.comwastheURLofthetopframe,andthepageIwasonloadedaniframefromgtmtools.com.IntheApplicationtabIcanchoosegtmtools.comtoinspectthecookiesofthatparticularcontext. Inthelistofcookies,ontheotherhand,ifyouseemultipledifferentdomainslistedit’sbecausethepageissendingrequeststothesedomains.Ifthebrowsersupportsthird-partycookies,you’llseeallthecookiessetonthedomainsthebrowseriscommunicatingwith. Ifthebrowserblocksthird-partycookies,you’llonlyseecookiessetonthesiteofthetopframe(theURLtheuserisbrowsing). Create,edit,anddeletestorage Byclickinganystorageentryandpressingbackspace/delete,youcanremovethatparticularitemfromthebrowserstorage. Youcaneditanystoragevaluesbydouble-clickingthevalueyouwanttoeditintherelevantcolumn. Youcancreateanewcookie(orotherstorageentry)bydouble-clickingtheemptyrowatthebottomofthestoragelist.Youcantheninputanyvaluesyouwantintothecolumns. Debugwebanalyticsimplementations Onceyouhaveafeelforthedevelopertools,youcanstartdebuggingactualissueswithyourimplementations. PleasenotethatsincethescopeofthingsyoucandowithJavaScriptissoimmenselyvast,it’simpossibletoexhaustivelylistallthethingsthatyoushoulddowhendebuggingyoursetup. Inthischapter,I’velistedsomeofthemorecommonwaystoapproachimplementationissues. Ifyouhaveother,commonusecasesyouthinkshouldbelistedhere,pleaseletmeknowinthecomments! Checkbrowsercookies Manyanalyticstoolsutilizebrowserstoragetopersistthingslikeuserandclientidentifiers. GoogleAnalytics4usesthe_gaand_ga_cookiestostoreinformationabouttheuserandthesession,respectively. Ifyouseetoomany(ortoofew)usersinyourGA4datacomparedtothecountofsessions,forexample,itmightbethatthere’ssomethingwrongwiththebrowsercookies.SoopentheApplicationtabandlookfor_ga. Ifyoudon’tfindanycookieswiththatnameorprefix,it’spossiblethatthere’ssomethingwrongwithyourimplementationandthecookieiseithernotbeingsetorit’sbeingsetincorrectly. Atypicalmistakeisoverwritingthecookie_domainfieldwithsomethingincorrect.Thetrackertriestosetthecookieonaninvaliddomainandthecookiewritefails. ItmightbeusefultohavetheGADebuggerextensionenabled,astheJavaScriptconsolewillinformyouifthecookiewritefailedforsomereason. Anotherverycommonreasonforcookiesfailingisbecausethepageisactuallyrunninginacross-siteembeddediframe,andduetothird-partycookierestrictionsthepageisunabletosetthecookiescorrectly. Filternetworkrequests You’llalsowanttolookthroughthenetworkrequeststoseeifyourendpointisactuallyreceivingthedata. GoogleAnalyticsrequestsaresenttothe/collectpath,withthedomainwww.google-analytics.comoranalytics.google.com(latterifGoogleSignalsisenabled). Ifyouseearequestto/collectwithastatuscodeof200,itmeansthatyourrequestwasmostlikelycollectedbytheendpointsuccessfully. Ifyouseeanabortedrequest(orsomeothererror),it’stypicallybecausetherequesthappenedjustastheuserwasnavigatingawayfromthepage(althoughthisislesscommonwithGoogleAnalytics4). Ifyoudon’tseetherequestatall,itmeansthatsomethingispreventingtherequestfrombeingdispatched.Again,usingtheGADebuggerextensionisagoodidea,becausetheextensionlogsinformationintotheconsolethatmightbeofuse. Identifyconflictsinglobalmethods Sometimes,rarely,theglobalmethodsusedbyyourwebanalyticstoolhavebeenoverwrittenbysomeothertool. Thisisaconstantdangerwhenusingglobalmethods,andGoogleAnalyticsusingtheganamespaceforUniversalAnalyticsisanexampleofaglobalnamethatcaneasilybetakenbysomeother,unrelatedtool. Sometimesit’sdifficulttofindissueswiththeglobalnamespace,becauseusingtoolslikeGoogleTagManagermightmakeglobalmethodsirrelevant. Butifyou’rehavingtroublewithyourrequestsworking,youcanalwayscheckiftheglobalmethodsthatyourtooluses(e.g.ga,gtag,dataLayer)areeitherundefinedorsettosomethingthatdoesn’tresembleyouranalyticsplatformcodeatall. Noteaboutiframes Ifyouembedcontentinacross-site(orthird-party)iframe,rememberthatanythingthathappensintheiframehappensinthird-partycontext. Thismeansthatifyou’rerunningGoogleAnalyticsintheiframe,itwillnotworkbecausebydefaulttheGAcookiesarenottreatedinawaythatwouldmakethemworkinthird-partycontext. You’llseetheCookiewritefailederrormessageintheconsolewhenusingtheGAdebugger,ifthisisthecase. Furthermore,evenifyouupdatethecookiestousetherequiredsamesite=noneandsecureflags,browserslikeSafariandBraveoutrightblockthird-partystorage. Debugtagmanagementsolutions Sincetagmanagementsolutionsaremorelikeaframeworkfordeployinganalyticsandadvertisingpixels,iftheyfailtheneverythingthat’sloadedthroughthemfailstoo. Inthischapter,we’lltakealookatsomeofthewaysyoucandebugaTMSimplementationgoneawry. CheckDataLayerqueueforconflicts First,ifyou’reseeingissueswithyoursetup,checkiftheglobaldataLayerqueuehasbeenoverwrittenorisotherwisecompromised. WithGoogleTagManager,typedataLayer.pushintotheconsoleandcheckwhatitreturns.Ifitoutputssomethinglike[nativecode],itmeansthatdataLayerhasbeenresettoitsinitialstate,andGoogleTagManager’slistenersnolongerworkwithit. Alternatively,ifyouseesomethingotherthanavariationofthebelow,itmeansthatdataLayerhaspossiblebeenoverwritteninawaythatdoesn’tcorrectlyworkwithGTM.Thisisadifficultscenariotodebug,andrequiresthatyouaddabreakpointtothedataLayerprocessinginordertoseeifsomeothertooliscannibalizingthearrayandnotpassingtheargumentstoGTM. Youcanmockthiswithsomethinglike: window.dataLayer.push(function(){debugger;}); Thenstepthroughthestackandseeifthegtm.jslibraryisevervisitedwhensteppingthroughthemethods.IfGTMisneverreferenced,itmeansthatsomeothertoolhastakencontrolofdataLayerandyouneedtoresolvethisconflictelsewhere. Thisisanotoriouslydifficultscenariotodebug,soyoujustneedtopatientlylookthroughtheSourcestofindtheculprit.SearchforreferencestodataLayer,forexample.BlockJavaScriptfilesonebyoneinthenetworkdebuggertofindtheonethatiscausingtheconflict. Searchthroughtheelementinspector SometimesitmightbeusefultosearchthroughtheelementinspectortofindtheCustomHTMLtagsandscriptelementsinjectedbyGoogleTagManager. Youcansimplysearchforastringthatyouknowtobewithintheinjectedcode,butjustrememberthatGoogleTagManagerminifiesallinjectedcodeautomatically,sosearchingforaspecificvariablenamemightnotbeveryuseful.SearchforcontentwithinstringsorscriptURLsinstead. Ifyoudon’tseeanyreferencestotheelementsyou’dexpectGTMtoinject,itmeansthatGTMdidnotaddthoseelementstothepage.Typicallythisisbecausethetagneverfiredorthetagwasmisconfigured.SometimesitcanbebecauseofaCSPconflictthatyouneedtoresolve. Lookforrequestsinnetworktools WithGTM,too,it’salwaysusefultolookforrequestsinthenetworktools.Thisisalwaystheultimatetruthwhenitcomestodebuggingtheend-to-endflowofpixelrequests. IfTagAssistantsaysthatthetagfiredbutyoucan’tseeanythinginyouranalyticsplatform,thenyouneedtoopenthenetworkdebuggerandseeiftherequestwaseversent. RemembertocheckPreservelogtomakesurethattherequestsaren’tgobbledupbypagenavigation. Ifyoudon’tseetherequestsanywhere,itmeansthatthetagsnevermanagedtodispatchthem. Notethatthisisonlythefirststepofpotentiallyaverycomplexdebuggingflow,becausetherecanbeamilliondifferentreasonsforafailedrequest. Sometimesyoudoseetherequestbutyoustilldon’tseedatainyouranalyticstool.Inthiscase,meticulouslysiftthroughtheheadersandthepayloadoftherequesttoseeifithasalltheinformationyouexpectittocontain. Searchthroughsources Finally,searchingthroughsourcescanbeveryusefulinidentifyingissueswithyourtagmanagementsystem. WithGTM,it’softenthecasethattheversionwasn’tactuallypublishedtotheliveenvironmentbutrathertoastagingcontext. Itmightbeusefultotakeatagthatyouexpectthemostrecentversiontohave,andthensearchforsomethinginthattag’scode(anID,aparameter,akey-valuepair)withinthegtm.jslibrary. Sometimessearchingthroughthesourcesisanexerciseinfutility,especiallybecausethecodeissominifiedthatyoucan’tmakeanyheadsortailsofit.Tryingtonarrowdownwithmorespecificsearchtermsoftenhelps. Usefulbrowserextensions I’vealreadymentionedGADebuggerabove,butthereareotherusefulextensionsyoumightconsiderinstallinginyourbrowser(Chrome,mostoften)whichmakedebuggingyouranalyticssetupabreeze. Manyoftheseextensionstaketheexistingcapabilitiesofbrowserdevelopertoolsandhonethemtosuitaspecificsetofusecasesintheanalyticsworld. Istillrecommendtoalwaysusedevelopertoolsasyourmaintoolofchoice,butdotakealookattheseextensionsandseeiftheycouldhelpalleviatesomeofthepainofdebuggingyouranalyticsortagmanagerimplementation. GTM/GADebugger DavidVallejo’sChromeextension,GTM/GADebugger,iscertainlythemostambitiousandthemostimpressivebrowserextensionfordebuggingGoogleAnalyticsandGoogleTagManagerimplementations. Thefeaturesetissoincrediblyrichthatitdoesn’tmakesensetogothroughallthefunctionalityhere,buthere’sjustashortoverviewofthingsyoucandowiththeextension: BlockGA3/GA4hits Inspectserver-sidetagginghits Exportasatable,copyobjects Enhancedecommercereports AnalyzedataLayerandtheoutgoingrequests ShowPOSTdatainameaningfulway ViewalldataLayermessages(notjusttheonessentonthecurrentpage) Everythingisjustdisplayedsonicelyandsointuitively.Youdon’thavetosiftthroughcomplicatedheadersandmessypayloads–it’sallvisuallydisplayedinrichtablesandwithpurposefulstructure. GADebugger GADebuggeristheofficialUniversalAnalytics,GoogleAnalytics4,andGoogleTagManagerdebugger. Itoutputsinformationabouttheaforementionedplatformsintotheconsole. Ilovethistoolbecauseoncetheinformationisintheconsole,searchingthroughitiseasywiththeJavaScriptconsole’sownsearchtools. TheGADebuggerhelpfullyinformsyouwhysomethingwentwrongratherthanjustshowinganon-descripterrormessage.Naturally,insomecasesyoustillneedtocontinueinvestigating,buttheconsoleoutputcanbeveryhelpfulincollectingtheinitialsetofleadsforyourresearch. Note!Thisextensiondoesn’tworkifyouloadyourfilesfromorcollecthitstoaserver-sideendpoint. LiveHTTPHeaders LiveHTTPHeadersismyfavoriteextensionfordebuggingHTTPtraffic.It’saneasywaytoinspecttheheadersofalltheHTTPrequestsdispatchedbythebrowser. Althoughtodayyoucangetprettymuchallthesameinformationinthenetworkdebuggerofthedevelopertools,IstillpreferthevisualoutputofthisextensionanduseitdiligentlywheneverIwanttoquicklylookthroughredirectsorHTTPheaders. Summary Eventhoughthisarticleislongandfullofwordsandpictures,itcoversonlyafractionoftheapproachesyoucantakewhendebuggingyouranalyticsandtagmanagementimplementations. Theideawasn’ttolisteverythingthatcangowrongandgiveyouthesolutionhowtofixit.Instead,thepurposeofthisguideistogiveyouthetoolsandtheconfidencetostartcollectingleadsforyourowninvestigations. Debuggingthecomplexityofwhathappenswithinawebbrowserisadauntingtask.Butthedebuggingstepsthemselvesareoftenverypredictableandcanberepeatedfromonescenariotothenext. Myworkflowisprettysimple: Alwaysstartwithinspectingthenetworkrequests.Trytofindtherequeststhatyou’redebugging.Ifyoufindthem,lookthroughtheheadersandthepayloadtoseeiftheycontainthedatayouexpectthemtohave. Searchthroughthesourcestofindinconsistenciesinthelibrariesyouuse(particularlyGoogleTagManager).Ifyoucan’tfindreferencestoaspecifictagyouexpecttobeinGTM,itmeansthatyoumightbepreviewingthewrongversionorthatyouneveractuallypublishedaversion. Lookthroughcookiestoseeifthevaluesusedbyyouranalyticstoolpersistfromonepageloadtothenext.Ifthevalueschange,thenitmeansthatthecookiesarebeingresetoroverwrittenforsomereason(typicallyaconsentmanagementplatformistoblame). UtilizetheelementinspectorespeciallywhenyouarecertainthatthepageshouldincludesomeelementortagdeployedthroughGoogleTagManager. Ifyouhaveadditionalideasforthedebuggingflowthatyouthinkshouldbeincludedinthisguide,pleaseletmeknowinthecomments. Whatareyourfavoritewaysofdebugginganalyticsandtagmanagementsolutionissues? TAGGEDIN googletagmanager debug developertools googleanalytics NEXT PREVIOUS NEXT PREVIOUS ShareonFacebook ShareonTwitter ShareonLinkedIn SimoAhava Husband|Father|Analyticsdevelopersimo(at)simoahava.com SeniorDataAdvocateatReaktor Finland