Would you Believe Google Tag Manager Can Track These Events on Your Website

Would You Believe Google Tag Manager Can Track These Events on Your Website?

Whenever I mention I work in Online Performance at Internetrix, I get asked what do we do and how do we change the way business gets ahead in Australia. My answer is that we cover the full range of Online Performance, from Search Engine Optimisation (SEO), Digital Marketing and Google Analytics and AdWords, to Google Optimize and Google Data Studio. We are one of the leading digital companies in the region working with all types of business from sole traders, to ASX-listed companies, and all levels of Government.

A good example where we lead the field, is our work on Google Tag Manager, a comprehensive, free tool for tracking different events on websites. Rather than restricting ourselves to the standard, ready-made tags and events, we dig deeper in this article into examples of advanced GTM usage. If you are serious about driving business through your website, you will absolutely love GTM and the amazing range of events you can track.

For example, did you know you can track pages where mobile users are using gestures to enlarge the image or CapsLock Button is clicked on the keyboard? This knowledge is seriously useful to understand possible reasons for poor performance; and most importantly, gives you a clue where to start optimising your website and avoid confusing your visitors.

Would_you_Believe_Google_Tag_Manager_Can_Track_These_Events_on_Your_Website_image_1

What is Google Tag Manager (GTM)?

GTM is free, and an amazingly convenient and simple Google platform that you place in your website. From the administration dashboard, you can then track user actions as they journey through your website. For example, you can track all clicks on external links, mailto: links and clicks on downloadable files such as PDFs. You can even drill down to track the number of times visitors play, pause and watch your YouTube videos either in part or right the way through. Another big plus is that you usually only need to set up GTM on your website once, then you can keep tracking visitor interaction. Code changes required after the initial setup are rare.

The Role of the DOM in GTM and Web Development

The DOM or ‘Document Object Model’, the key to how GTM tracking works, is the model used to depict objects in a Web page (text, images, headers, links, etc.). The DOM states the attributes associated with each object, and how we work with them both. Dynamic HTML (DHTML) works with the DOM to dynamically manipulate Web pages once downloaded to a visitor's browser.

By working with the DOM, programmers create documents, navigate around them, and add, modify, or delete elements and content. The DOM allows us to access, change, delete or add within an HTML or XML document. The exception to this is for DOM interfaces for the XML internal and external subsets which have not yet been specified.

To cut a long story short, whatever we track on our website, 90% of the time we will be using DOM Events. If you want to delve deeper into DOM, try these links:

Wikipedia and Mozilla Developer Network

Unveiling the Mysteries of GTM

Many people know what GTM is, and have been using it on their website. They may also have heard about GTM's predefined variables and triggers. However, GTM users may not be aware of or skilled in the web development knowledge that opens the door to a whole new world of amazing things to track on their websites by properly implementing GTM tagging using JavaScript and DOM events.

Most of the events have self-explanatory names, so let's take a look at the DOM elements we can track:

Overview of Common DOM Categories

  • Resource Events
    • Cached - The resources listed in the manifest have been downloaded, and the application is now cached.
    • Error - A resource failed to load.
    • Abort - The loading of a resource has been aborted.
    • Load - A resource and its dependent resources have finished loading.
    • Beforeunload - The window, the document and its resources are about to be unloaded.
    • Unload - The document or a dependent resource is being unloaded.
  • Network Events
    • online - The browser has gained access to the network.
    • offline - The browser has lost access to the network.
  • Focus Events
    • focus - An element has received focus (does not bubble).
    • blur - An element has lost focus (does not bubble).
  • Websocket Events
    • open - A WebSocket connection has been established.
    • message - A message is received through a WebSocket.
    • error - A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
    • close - A WebSocket connection has been closed.
  • Session History Events
    • pagehide - A session history entry is being traversed from.
    • pageshow - A session history entry is being traversed to.
    • popstate - A session history entry is being navigated to (in certain cases).
  • CSS Animation Events
    • Animationstart - A CSS animation has started.
    • Animationend - A CSS animation has completed.
    • Animationiteration - A CSS animation is repeated.
  • CSS Transition Events
    • Transitionstart - A CSS transition has actually started (fired after any delay).
    • Transitioncancel - A CSS transition has been cancelled.
    • Transitionend - A CSS transition has completed.
    • Transitionrun - A CSS transition has began running (fired before any delay starts).
  • Form Events
    • Reset - The reset button is pressed
    • Submit - The submit button is pressed
  • Printing Events
    • Beforeprint - The print dialog is opened
    • Afterprint - The print dialog is closed
  • Text Composition Events
    • Compositionstart - The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
    • Compositionupdate - A character is added to a passage of text being composed.
    • Compositionend - The composition of a passage of text has been completed or canceled.
  • View Events
    • Fullscreenchange - An element was turned to fullscreen mode or back to normal mode.
    • Fullscreenerror - It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
    • Resize - The document view has been resized.
    • Scroll - The document view or an element has been scrolled.
  • Clipboard Events
    • Cut - The selection has been cut and copied to the clipboard
    • Copy - The selection has been copied to the clipboard
    • Paste - The item from the clipboard has been pasted
  • Keyboard Events
    • Keydown - ANY key is pressed
    • Keypress - ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
    • Keyup - ANY key is released
  • Mouse Events
    • Mouseenter - A pointing device is moved onto the element that has the listener attached.
    • Mouseover - A pointing device is moved onto the element that has the listener attached or onto one of its children.
    • Mousemove - A pointing device is moved over an element. (Fired continously as the mouse moves.)
    • Mousedown - A pointing device button is pressed on an element.
    • Mouseup - A pointing device button is released over an element.
    • Auxclick - A pointing device button (ANY non-primary button) has been pressed and released on an element.
    • click - A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.
    • dblclick - A pointing device button is clicked twice on an element.
    • contextmenu - The right button of the mouse is clicked (before the context menu is displayed).
    • wheel - A wheel button of a pointing device is rotated in any direction.
    • mouseleave - A pointing device is moved off the element that has the listener attached.
    • mouseout - A pointing device is moved off the element that has the listener attached or off one of its children.
    • select - Some text is being selected.
    • pointerlockchange - The pointer was locked or released.
    • pointerlockerror - It was impossible to lock the pointer for technical reasons or because the permission was denied.
  • Drag & Drop Events
    • dragstart - The user starts dragging an element or text selection.
    • drag - An element or text selection is being dragged (Fired continuously every 350ms).
    • dragend - A drag operation is being ended (by releasing a mouse button or hitting the escape key).
    • dragenter - A dragged element or text selection enters a valid drop target.
    • dragover - An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)
    • dragleave - A dragged element or text selection leaves a valid drop target.
    • drop - An element is dropped on a valid drop target.
  • Media Events
    • durationchange - The duration attribute has been updated.
    • loadedmetadata - The metadata has been loaded.
    • loadeddata - The first frame of the media has finished loading.
    • canplay - The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
    • canplaythrough - The browser estimates it can play the media up to its end without stopping for content buffering.
    • ended - Playback has stopped because the end of the media was reached.
    • emptied - The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
    • stalled - The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
    • suspend - Media data loading has been suspended.
    • play - Playback has begun.
    • playing - Playback is ready to start after having been paused or delayed due to lack of data.
    • pause - Playback has been paused.
    • waiting - Playback has stopped because of a temporary lack of data.
    • seeking - A seek operation began.
    • seeked - A seek operation completed.
    • ratechange - The playback rate has changed.
    • timeupdate - The time indicated by the currentTime attribute has been updated.
    • volumechange - The volume has changed.
    • complete - The rendering of an OfflineAudioContext is terminated.
    • ended - Playback has stopped because the end of the media was reached.
    • audioprocess - The input buffer of a ScriptProcessorNode is ready to be processed.
  • Progress Events
    • Loadstart - Progress has begun.
    • Progress - In progress.
    • Error - Progression has failed.
    • Timeout - Progression is terminated due to preset time expiring.
    • Abort - Progression has been terminated (not due to an error).
    • Load - Progression has been successful.
    • Loadend - Progress has stopped (after "error", "abort" or "load" have been dispatched).
  • Storage events
    • change (see Non-standard events)
    • storage
  • Update events
    • checking
    • downloading
    • error
    • noupdate
    • obsolete
    • updateready
  • Value change events
    • broadcast
    • CheckboxStateChange
    • hashchange
    • input
    • RadioStateChange
    • readystatechange
    • ValueChange
  • Uncategorized events
    • invalid
    • localized
    • message
    • message
    • message
    • open
    • show

Overview of Less Common & Non-Standard DOM Categories

  • SVG events
    • SVGAbort
    • SVGError
    • SVGLoad
    • SVGResize
    • SVGScroll
    • SVGUnload
    • SVGZoom
  • Database events - Events Related to Database interaction.
    • abort
    • blocked
    • complete
    • error (link)
    • success
    • upgradeneeded
    • versionchange
  • Notification events
    • AlertActive
    • AlertClose
  • CSS events
    • CssRuleViewRefreshed
    • CssRuleViewChanged
    • CssRuleViewCSSLinkClicked
    • transitionend
  • Script events
    • afterscriptexecute
    • beforescriptexecute
  • Menu events
    • DOMMenuItemActive
    • DOMMenuItemInactive
  • Window events
    • DOMWindowCreated
    • DOMTitleChanged
    • DOMWindowClose
    • SSWindowClosing
    • SSWindowStateReady
    • SSWindowStateBusy
    • close
  • Document events
    • DOMLinkAdded
    • DOMLinkRemoved
    • DOMMetaAdded
    • DOMMetaRemoved
    • DOMWillOpenModalDialog
    • DOMModalDialogClosed
  • Popup events
    • popuphidden
    • popuphiding
    • popupshowing
    • popupshown
    • DOMPopupBlocked
  • Tab events
    • TabOpen
    • TabClose
    • TabSelect
    • TabShow
    • TabHide
    • TabPinned
    • TabUnpinned
    • SSTabClosing
    • SSTabRestoring
    • SSTabRestored
    • visibilitychange
  • Frame events
    • DOMFrameContentLoaded
  • DOM mutation events
    • DOMAttributeNameChanged
    • DOMAttrModified
    • DOMCharacterDataModified
    • DOMContentLoaded
    • DOMElementNameChanged
    • DOMNodeInserted
    • DOMNodeInsertedIntoDocument
    • DOMNodeRemoved
    • DOMNodeRemovedFromDocument
    • DOMSubtreeModified
  • Touch events
    • touchcancel
    • touchend
    • touchenter
    • touchleave
    • touchmove
    • touchstart
  • Pointer events
    • pointerover
    • pointerenter
    • pointerdown
    • pointermove
    • pointerup
    • pointercancel
    • pointerout
    • pointerleave
    • gotpointercapture
    • lostpointercapture

Did you expect the length of that list? Interested and Intrigued?

Ask your developer and analytics team to go beyond the standard features like 'Link Clicks' 'Form Submitting' and 'Page Views of GTM. Extract maximum profits from free tools like Google Tag Manager to work wonders with your online business.

Thank you for browsing this post, stay tuned for more from Internetrix. GTM is a constantly evolving field, packed with interest and benefits for business, so we will be frequently updating this article and recommend you bookmark this page, subscribe to our email newsletters and social media pages, to gain maximum benefit from our GTM insights we love to share. Pick up the phone, Live Chat, or email us if you would like us to share our web development skills, case studies, and knowledge to achieve your business goals and targets.

Need help with your Google Tag Management? Talk to us

Internetrix combines digital consulting with winning website design, smart website development and strong digital analytics and digital marketing skills to drive revenue or cut costs for our clients. We deliver web-based consulting, development and performance projects to customers across the Asia Pacific ranging from small business sole traders to ASX listed businesses and all levels of Australian government.

Add Your Comment

Comments (1)

Brandstory 09/11/2017 9:01pm

Very good information. Really it is very useful for all who are searching for GTM functionality