GTM Runs Javascript at Runtime
Google Tag Manager is not just a way to implement marketing tags on your website. Google Tag Manager is actually a layer of software which runs on top of your website in the web browser, which provides you the ability, through its interface, to add additional JavaScript to run on a GTM-enabled webpage at runtime.
Consider the idea of implementing Google Analytics tracking on your website via GTM: instead of adding the Google Analytics JavaScript code directly on your website by editing the files on the server, you instead implement Google Tag Manager on the website and then, via the GTM interface, you configure GTM to load the GA JavaScript code when the webpage is loaded.
When the webpage loads, GTM loads, and it decides what JavaScript code to run, if any. This JavaScript code doesn’t have to be limited to marketing tags. In some cases you can add useful functionality to your website using GTM.
Example: Providing Support for HTML Anchor Tags Within Expandable Content Areas
Background
You can place named ‘anchor’ tags in HTML. If the URL used to access your website specifies a named anchor, the webpage will open and automatically scroll to the location of the anchor in the document.
However, on many websites you cannot rely on this anchor functionality if the anchor is situated within an expandable content area. Because expandable content areas usually default to closed, the anchor is not visible on the screen when the page is loaded. Because the anchor isn’t visible, the browser doesn’t automatically move to the anchor. Moreover, there is not an automatic mechanism to open the relevant expandable area.
Link showing default functionality: https://drupaltraining.gmu.edu/anchors-expandables-original#anchor2
The Solution
The following example demonstrates a solution wherein GTM is used to add some custom JavaScript code which addresses the problems mentioned above with anchors situated within expandable content areas.
The logic of this script is as follows:
- The script checks for the presence of a named anchor in the URL.
- If an anchor is found in the URL, the script checks for a corresponding named anchor within the web page.
- If a corresponding named anchor is found within the web page, the script identifies and opens the expandable content area containing the anchor, if any.
- The script then scrolls to the location of the anchor (minus a few pixels to account for the menu bar).
Link to working example: https://drupaltraining.gmu.edu/anchors-expandables#anchor2
The Code
<script>
// What: Provides functionality for cases where a named anchor is situated within an expandable content area.
// Who: Jan Macario
// When: 20180214
//
// Details:
// if there is a hash/anchor included in the URL...
// check to see if there is a corresponding anchor in the page, and...
// if the anchor is within an expandable content area, open that content area, and...
// scroll the viewport to that area...
// plus 100 pixels to account for the height of the header menu.
//is there a hash in the URL?
if(window.location.hash) {
//Get hash value
anchor_name=window.location.hash.substr(1);
//Get anchor element, if any
$anchor = jQuery("a[name='" + anchor_name + "']")
//Get parent expandable content area, if any
$container = $anchor.parents("div.expanded-content");
//Expand parent expended-content div, if any
$container.slideToggle("fast");
//Scroll viewport to anchor
jQuery('html, body').animate({
scrollTop: $anchor.offset().top-100
}, 1000);
}
</script>
Other Possibilities
- Script to mitigate the fact the regular anchors (not within expandable areas) end-up hidden behind the menu bar on the Mason core website.
- Script to change page design (e.g. color-coding) where desirable.
- This method need not be limited to client-side changes. If you have your own web server you could write some JavaScript code to make AJAX requests to your webs server in order to pull data from your web server to display on the website, or even change data on your web server.