Tracking the Protocol version in Google Analytics via Google Tag Manager

Despite you being a SEO or not, I'm sure you're aware of how important the WPO ( Web Performance Optimization ) and this of includes of course how fast your site loads. The faster it loads the better for your users ( and better for the conversion rates they say ... ).

At this point you may have heard about HTTP/2 (2015) , which the replacement for the oldie HTTP/1.1 ( 1995) , you have even heard about http/3 ( last draft Feb 2020 ), which is ever a more modern Hypertext Transfer Protocol, witch runs over QUIC transport layer protocol and that now run over UDP instead of TCP.

Ok, I know all this may be too much unneeded technical details, but I found some clients that may have some different websites/servers, and they need to track their sites performs

Sooo, this time we're going to learn how to track the request protocol version using for loading the current page and pushing it back to Google Analytics as a Custom Dimension.

We'll need to create the following Custom JavaScript Variable in Google Tag Manager, We'll be using it later in our Google Analytics Tags.

// getProtocolVersion()
function(){
    // Search on performance API for the navigation type entry and grab the info if available
    if(window.performance && window.performance.getEntriesByType("navigation") && window.performance.getEntriesByType("navigation").length > 0 && window.performance.getEntriesByType("navigation")[0].nextHopProtocol){
        return window.performance.getEntriesByType("navigation")[0].nextHopProtocol;        
    // This is deprecated on Chrome, but better checking in in case performance fails :)    
    }else if(window.chrome && window.chrome.loadTimes() && window.chrome.loadTimes().connectionInfo){
        return window.chrome.loadTimes().connectionInfo;        
    }else{
        // If nothing is available let's record the Scheme
        return document.location.protocol ? document.location.protocol.match(/[^:]*/)[0] : "(not set)";
    }
}
                                

This piece of code mainly relies on the window.performance API from the browser, If it's not available for any reason ( old browsers ) , a (not -set) will be set. ( NOTE: There's a deprecated API in Chrome Browers: chrome.loadTimes(), that we'll be checking in case performance is not available ).

What we do is checking for the "navigation" type entry in the performance API. Since we just need to know the main html request protocol details. ( the request that contains our HTML source )

After that we should be able to see the info in the preview mode, check the following screenshot:

Now we just need to create a new custom dimension index ( hit scope ) and map the value to this newly created variable. Or pass it as a Parameter to the page_view event if you're already using APP+WEB Properties