Top 22 Google Tag Manager Extensions and Tools for Fast ...

#9. Data Layer Checker ... Another extension to help you easier debug what's happening in the Data Layer. But unlike Data Slayer or Data Layer ... Search May10,2020 Top22GoogleTagManagerExtensionsandToolsforFastandEfficientWork Updated:May10th,2020.AlotofnewthingshavehappenedintheindustrysincethefirsttimewhenIpublishedthisblogpost(backinearly2017).Almostthreeyearshavepassedandalotofnewtoolsweredeveloped(ordiscovered).Thetimehascomeforthe5thversionofthislist. Ifyou’reusingGoogleTagManagerasoftenasIdo, you’reprobablylookingfornewwaystoimproveyourperformance,catchbugsfasteranddeliverthefinalresultwithoutmuchhassle.Ifmyguesswasright,you’llenjoythese22 GoogleTagManagerextensionsandtools(andnotallofthemarejustforGoogleChrome).Andthebestpart–they’reallfree!Sodonothesitateandgivethemashot. AllGoogleTagManagerExtensionsaredisplayedinnoparticularorder. TagAssistant(Legacy)+TagAssistantCompanion DataSlayer DataLayerSifter WASP DaVinciTools GTMSonar dataLayerInspector+ GTMVariableBuilder DataLayerChecker CopyCSSSelector GTMTools GTMCopyPaste customTaskBuilder GTMDebug SandoGTM GTMSpy GADebugger EditThisCookie RedirectPath FacebookPixelHelper TwitterPixelHelper UETTagHelper     #1.TagAssistant(legacy)+TagAssistantCompanion TheTagAssistantChromeextensionisaveryusefultoolintestinganddebuggingyourimplementation.NotonlydoesithelpwithtroubleshootingofGoogleTagManager,butalsoGoogleAds,Analytics,DoubleClick,andothertoolscanbeeasilyverified. Oneofthemostpowerfulfeatureswithintheextensionisrecordings.Thisallowsyouto“record”abrowsingsessionandproduceareportonallofthehitsbeingsentthroughandevenhowtheywillpotentiallyshowupwithinGoogleAnalytics.Bytheway,youcanfindmyguideonthisextensionhere. GetTagAssistantforChrome However,asyouhavealreadynoticed,thenameoftheextensioncontainstheword“Legacy”.Eventually,thisextensionwillbedeprecated.Soifthathappens,thenyoucanusealighterversionoftheextension,anditiscalledTagAssistantCompanion.EventhoughitdoesnothaveLegacy’sdebuggingfeatures,itwillstillenhanceyourGTM’spreviewanddebugmode.         #2.DataSlayer AnotherentryinthislistofGoogleTagManagerExtensions,Dataslayer,addsapaneltoChromeDeveloperToolsthatmonitortagmanagementdatalayersanddisplayschangesinaneasy-to-read,user-friendlyformat. NotonlydoesitsupportGoogleTagManager,butitalsoplayswellwithTealium. GetDataSlayerforChrome     #3.DataLayerSifter ThisGoogleTagManagerextensionhelpsyoufindDOMelementsandtheirvalueswithintheDataLayerfast.GTMdataLayerSiftercanbeusedtosearchaparticulareventintheDataLayerforaDOMelementtobeusedinGoogleTagManager. Ifthisisstilldifficulttocomprehend,here isasample usecaseof whatyoucanachievewithDLSifter: IfyouwishtotrackFormFieldvalues,youneedtodefinetheelement’s“path”onthewebsite.Thismightbereallytime-consuming,butwiththehelpofDataLayerSifter,thiscanbeachievedmucheasier. YoucanlearnmoreaboutDataLayerSifterinthisvideotutorial. GetDataLayerSifterforChrome     #4.WebAnalyticsSolutionProfiler–WASP Update: Itlookslikethispluginisnolongeravailableasitreturnsa404errorintheChromeStore.However,I’llstillkeepthishereforawhile(becausemaybethat’satemporaryissue). Thisextensionisforadvancedusers. WASPgivesyouavisualrepresentationofthetagsfiringonyoursiteandthecorrelationbetweenthem. Clickinganyofthetagsprovidesdeeptechnicalinsightintowhat’shappeningbehindthecurtain.WASP’sfunctionalityallowsyoutopeerintotheGoogleTagManager datalayerwhicheasesthetroubleshootingofGoogleTagManagerandUniversalAnalyticsimplementations. WASPalsosupportsOmniture,SiteCatalyst,DoubleClick,andanyotherplatformsyoumaybeimplementing. GetWASPforChrome #5.DaVinciTools DaVinciToolsbringshandyenhancements,bugfixesandhacksdirectlyintotheGoogleAnalyticsandGoogleTagManagerinterfaces.Tonameafew: FocusonthesamereportwhenswitchingviewinGoogleAnalytics SetdefaultpageinGTMinterface(insteadofOverview) AbilitytoturnallGTMbuilt-invarson/offatonce AbilitytocopyvaluesfromGTMPreviewandDebugMode’sDataLayerTabandmanymanyotherenhancements. AndI’mjustscratchingthesurfacehere!Manymoreenhancementsarewaitingforyou. GetDaVinciToolsforChrome     #6.GTMSonar CreatedbySimoAhava,thisextensionletsyoudebugclicksandformsubmissionseasier.Whenenabled,itpreventslinksfromredirectingyoutoanotherpageandformsubmissionsfromrefreshing/redirectingyoutoanotherpage. Whypreventthedefaultactionofclickorformsubmission?Simple,fordebuggingreasonsit’sbetterifyoustayonthesamepage.Haltingthedefaultactionpreventslinksfromworking,thusyoucaneasilycheckwhathappensonawebsiteandwhatdatacanbeusedfortrackingpurposes. GetGTMSonarforChrome     #7. dataLayerInspector+ Thisisoneofmynewfavorites.WhatIlikeaboutit,isthatthe extension(byAdswerve)caninjectyourGTMcontaineronasite,logswhatdatawaspushedtodataLayer,runsdiagnosticsformostcommonissues,andoffersabunchofotherfeatures.I’malsogivingacloserlookatthisextensioninmyIntermediateGTMcourse. GetdataLayerInspector+ forChrome     #8.GTMVariableBuilder ThisusefulpluginenablesyoutoeasilycreateCustomJavaScriptvariablesthatretrievevaluesofparticularwebsiteelements.Ifyou’renotfamiliarwiththeDOMvariable,feelfreetousethisextension. Howdoesitwork? OpenJavaScriptconsoleinChrome,highlightany elementonawebsiteandclickextension’sicon.Whatyou’llgetistheJavaScriptfunctionthatshouldbeusedinaGTMCustomJavaScriptvariable. Getthisextension     #9.DataLayerChecker Anotherextensiontohelpyoueasierdebugwhat’shappeninginthe DataLayer.ButunlikeDataSlayerorDataLayerInspector,thispluginenablesyoutochecktheDataLayerwithouthavingtousethebrowserconsole. Whichoneisbetter,youask?Well,it’suptoyou.Tryall3andseewhichonefitsyourneedsthebest.MypersonalfavoriteisDataLayerInspectorbecauseitalsooffersabunchofotherfeatures,likeinjectingGTMcontainer. Butifyoudon’tneedtheSwissarmyknifeandjustwanttodebugtheDataLayer,maybeDataLayerCheckercouldbeyourchoice. Getthisextension   We’rehalfwaythrough.10GoogleTagManagerExtensionsdown,10togo!Therearesomegemswaitingforyousodon’tgoawayandcontinuereading.   #10.CopyCSSSelector Ifyou’reregularlyworkingwith MatchesCSSSelectoroperatorinGoogleTagManager,thenthisextensionisforyou.Whyisituseful?IfyoustrugglewithCSSSelectorsorjustwanttosavetime, CopyCSSSelectorwilldotheworkforyou.Justright-clickthewebsiteelementyouwishtotrack,hit CopyCSSSelector,andpastetheselectorinyourGoogleTagManagerTrigger. Ifyoudon’tknowwhatCSSSelectorsare,readthisSimoAhava’sguide.Theyareespeciallyuseful(butnotlimitedto)whenyouwanttotrackclicksofaparticularwebsiteelementthathasnoIDandsharesthesameCSSClassasseveralotherelements. LearningsomebasicsofCSSSelectorsopenednewpossibilitiesforme,soyoushoulddefinitelydigintoo. Getthisextension     #11.GTMTools AnotherveryusefultoolcreatedbySimoAhava.Thistime,it’snotaGoogleTagManagerChromeextensionbutahostedweb-toolthathelpsmeauditandmanage/cloneGTMcontainer.Ithas3mainfeatures: Containervisualization(withit,youcanfindwhichcontainerelementsareheavilyusedorarenotusedatall). Inspectcontainer Clonecontainer.I’veusedthisfeaturetoexportapartofaGTMcontainer(because,bydefault,GTMexportstheentirecontainer).However,there’sanewplayerinthetown,aGoogleTagManagerExtension(forChrome)thatcanhelpyoudothatevenfaster.ContinuereadingandI’llshowyouwhatImean. StartusingGTMTools     #12.GTMCopyPaste JulianfromMeasureSchoolpublishedanamazingtime-savingGoogleTagManagerChromeExtension.Withit,youcaneasilycopyGTMcontainerelements(tags/triggers/variables)andpastethemtoanothercontainerwithasingleclick. Takealookatthesetwovideostolearnmore: Themainintroductoryvideo Updatedextensionfeatures Getthisextension     #13.customTaskBuilder The3rdtoolonthislistdevelopedbySimoAvaha.Ifyou’renotfamiliarwithaCustomTaskyet,readSimo’sguidefirst.Inanutshell,customTaskisamethodoftheUniversalAnalyticslibrary,whichletsyourunJavaScriptcodewhenthehitrequesttoGoogleAnalyticsisbeingbuilt. ThereisawholebunchofpossiblewaysofhowcustomTaskcanbeapplied.Tonameafew:removePersonallyIdentifiableInformationfromGAhits,automaticallyreducetheGApayloadsize,andmanymore.Sincethisfeatureisanadvancedone,SimoAhavapreparedacustomTaskbuildertoolthatwillsimplifytheprocess. Checkitout     #14.GTMDebug AnamazingChromeextensiondevelopedbyDavidVallejo thateasestheprocessofGoogleTagManagerdebugging.Amongmanyusefulfeatures,herearethemostnoteworthy(inmyopinion): CopyDataLayerpushesinaformattedway AbilitytoviewDataLayerpushesofpreviouspages FilteringbyGAHitTypeorGAaccountID SimplifiedEnhancedEcommercedebugging(I’veusedthisGTMextensionintheEnhancedEcommercemoduleofmyIntermediateGTMCourse.Arealtime-saver). TheseandotherusefulfeaturesarewaitingforyouinthatGTMextensionsodefinitelytryitout. Getthisextension     #15.SandoGTM Recently,IstumbleduponthisGoogleTagManagerChromeextensionandprobablyhaven’tuncovereditsfullpotentialyet.However,itlooksreallyusefulandofferssomehandytweaksthatGoogleTagManager’sUIislacking.Themostimportanttome:bulkdeletefeature.JusttickcheckboxesnexttotagsandthenhittheDeleteButton. GetthisGoogleTagManagerextension     #16.GTMSpy Thisfreetool(nosignuprequired)letsyoucheckwhat’sinsideoftheGTMcontainerofanywebsite.Thiscanhelpyouwithspyingonthecompetitororjustrecreatethecontentofthecontainerthatyoulostaccessto.I’veheardmultipletimesofsituationswhererogueagencieslocktheclientawayfromthecontainer(eventhoughthatcontainerisdefinitelytheclient’sproperty). Insuchcases,youcouldjustuseGTMspyandexportthecontainerthatisusedonyourownwebsite.ThencreateanewGTMcontainerandimportthefilethatyouexportedviaGTMSpy.Finally,askyourdeveloperstochangethecontainerIDinyourwebsite’ssourcecode.Thatway,you’llsolvethisnastyissuewiththeagency. KeepinmindthatGTMspyhassomeUI/UXissuesbutaslongasitisworking(andfree),Ibelievewecanlivewiththat. GetstartedwithGTMSpy     Thenext6extensionsareusefulevenifyou’renotusingGoogleTagManager.ButsinceIamimplementing(almost)everythingwithGTM,thesetoolsalwayscomeinhandy.   #17.GoogleAnalyticsDebugger ThisextensionletsyouseewhatdataisbeingpassedtoGoogleAnalytics.Forme,thiswasextremelyusefulwhile debugging Ecommerceimplementation(untiltheGTMDebugextensionwascreatedbyDavidVallejo). ItprintsusefulinformationtotheJavascriptconsoleofyourChromebrowser.Thesemessagesincludeerrormessagesandwarningswhichcantellyouwhenyouranalyticstrackingcodeissetupincorrectly.Inaddition,itprovidesadetailedbreakdownofeachtrackingbeaconsenttoGoogleAnalytics. GetGoogleAnalyticsDebuggerforChrome     #18.EditthisCookie Withit,youcanviewcookiessetbyGoogleAnalytics,delete,modify,andevenaddadditionalcookies.ThisisagreattoolforverifyingGAtrackersandanyothercustomcookiesthatmaybeinuse. Althoughyoucanalsoachievethesameresultwiththebuilt-intoolsofyourwebbrowser,EditthisCookiemakestheprocess mucheasieranduser-friendly. Forme,thisisamust-havetoolwhenIsetandreadcookieswithGoogleTagManager.Eventhoughyoucanachieveprettymuchthesameresultbyusingthebrowser’sbuilt-infunctionality,thisextensionmakestheworkeasier. GetEditThisCookieforChrome     #19.RedirectPath Thisextensionallowsyoutoeasilyseealltheredirectsthathappenedbetweentwopages.Oneofthemostpopularusecasesforme:DebuggingofCross-domaintracking.OneofthemainrequirementsforGAcross-domaintrackingtoworkistohavethedestinationURLdecoratedwiththelinkerparameter(_ga=……). Butwhatifyou’reconfiguringthecross-domainsetupbutthetargetURLnevergetsdecorated?Twopossiblereasonsare: Thelinkwasneverdecoratedontheinitialpage Betweentwopages,thereweremultipleredirectsandduringoneofthem,thelinkerparameter(_ga=…)waslost RedirectPathextensioncanhelpyouidentifysuchanissue.Justinstallit,navigatefrompageAtopageB(whiledebuggingyourcross-domainsetup)andthenclicktheextension’siconinthetoprightcornerofyourChrome. Intheexampleabove,therewasoneredirect.Thekwikipedia.orgURLcontainedthelinkerparameterbutaftertheredirect(type302)theparameterwaslost.Ifthat’syourcase,contactthedeveloperofthesiteanddiscusshowcantheyfixthis(becauseit’simpossibletofixthiswithGTM). GetthisextensionforChrome     #20.FacebookPixelHelper TheFacebookPixelHelperisatroubleshootingtoolthathelpsyouvalidateyourFacebookConversionPixelandCustomAudiencePixels.Usingthetoolyoucanverifywhetherthepixelisworkingproperly,whateventswerefired,andspoterrorsinnotime. AsmallnumberwillappearontheFacebookPixelHelpericontoindicatethenumberofpixelevents.Whenclicked,apanelwillexpandtoshowadetailedoverviewofthepage’spixels,includingwarnings,errors,andsuccesses. Eitheryou’reinstallingFacebookpixelortrackingFBconversionswithGoogleTagManager,FacebookPixelhelperisano-brainerandreliabledebuggingcompanion. GetFacebookPixelHelperforChrome     #21.TwitterPixelHelper SimilarlytoFacebookPixelHelper,TwitterPixelHelperdoesthesamejob,butforTwitterUniversal Websitetag. YoucancheckwhethertheTwitterTrackingcode(Pixel)wasimplementedsuccessfully.TroubleshootingofTwitterevents(conversions)isalsoavailable. GetTwitterPixelHelperforChrome     #22.UETTagHelper ThethirdPixelHelperinthegang.ThisonehelpswithdebuggingandvalidatingBing’sUET(UniversalEventTracking) tags.Hereaquickintrovideoaboutthisextension(butmoreorlessitworksintheprincipleashelpersofothertrackingpixels).     GoogleTagManagerExtensions:FinalWords Allgreatthingsmustcometoanend,eventhislist.IhopeyoufoundthecollectionofGoogleTagManagerExtensionsandtoolsuseful.Spottedsomethingnew?Giveitatry!Maybeyou’llloveit. Now,Ijustcannotlive(well,work)withoutsomeofthem.Myeverydaygo-totoolsatthemomentare: TagAssistant DataLayerInspector RedirectPath GTM/GADebug DaVinciisworkinginthebackground GADebugger DidImisssomeGoogleTagManagerExtensionsyoucan’timagineyourworkwithout?Letmeknowinthecommentsbelow! JuliusFedorovicius InGoogleTagManagerTipsResources Search Hi,I'mJuliusFedoroviciusandI'mheretohelpyoulearnGoogleTagManagerandGoogleAnalytics.Jointhousandsofotherdigitalmarketersanddigitalanalystsinthisexcitingjourney.Readmore