Issue 46, 2019-11-05

Designing Shareable Tags: Using Google Tag Manager to Share Code

Sharing code between libraries is not a new phenomenon and neither is Google Tag Manager (GTM). GTM launched in 2012 as a JavaScript and HTML manager with the intent of easing the implementation of different analytics trackers and marketing scripts on a website. However, it can be used to load other code using its tag system onto a website. It’s a simple process to export and import tags facilitating the code sharing process without requiring a high degree of coding experience. The entire process involves creating the script tag in GTM, exporting the GTM content into a sharable export file for someone else to import into their library’s GTM container, and finally publishing that imported file to push the code to the website it was designed for. This case study provides an example of designing and sharing a GTM container loaded with advanced Google Analytics configurations such as event tracking and custom dimensions for other libraries using the Summon discovery service. It also discusses processes for designing GTM tags for export, best practices on importing and testing GTM content created by other libraries and concludes with evaluating the pros and cons of encouraging GTM use.

By Tabatha Farney

Introduction

The Kraemer Family Library at the University of Colorado Colorado Springs uses Google Tag Manager (GTM) to deploy Google Analytics and other JavaScript code on most of its web presences including the main library website, catalog, link resolver, and discovery service. Each GTM container consists of a series of uniquely designed tags, triggers and variables for that specific web presence. These GTM containers were originally created for an individual library’s use, but after reading and responding to several requests on the Summon listserv to track more user actions, such as clicks on specific links, I saw a benefit to redesigning my library’s GTM container with the intent of sharing it with the Summon community. Since Summon uses the same base code, the GTM configuration created by one library can be used by another Summon library as long as that library did not drastically alter the source code. Building on Matthew Reidsma’s earlier work[1], the intent of this project is to provide other Summon libraries the option to collect additional user data with minimal coding involved. Summon provides a preview environment making it ideal for other libraries to test the concept of sharing a GTM container or GTM tags without impacting their live Summon instance. This case study presents two shareable GTM containers designed to load enhanced Google Analytics tracking to collect click data on search results and provide additional user data not found in the Summon usage reports. These containers were released to the Summon community in July 2019.[2] While these containers are for Summon and primarily focused on advanced Google Analytics tracking, this methodology can be applied to other popular library applications and different types of HTML or JavaScript code.

Designing GTM Tags for Export

GTM uses JSON to export and import information. It is useful to understand JSON, but not necessary as all GTM tags, triggers and variables can be created within the GTM platform and then exported into a JSON file in the GTM admin area. There are two approaches for creating shareable GTM configurations: offering a full package export where all the tags, triggers and variables are in a single JSON file or providing a more à la carte option (often referred to as GTM recipes[3]) that allows individuals to download separate JSON files or GTM templates containing sets of tags, triggers and variables that perform a desired functionality. The full package approach is useful when a GTM container is new, while the à la carte method is preferred for existing and well established GTM containers. Adding GTM to Summon is not a current default system function (it must be loaded via the custom JavaScript option in the Summon Admin Console) so the full package approach was used because the design assumption was that most libraries are not currently using GTM on their Summon website and would be creating new GTM containers for this process. Future development will use the à la carte method presuming the library already has GTM installed on their Summon website.


// Summon Best Bet 
{
  "exportFormatVersion": 2,
  "exportTime": "2019-07-25 18:59:46",
  "containerVersion": {
    "path": "accounts/4702072783/containers/12078692/versions/0",
    "accountId": "4702072783",
    "containerId": "12078692",
    "containerVersionId": "0",
    "container": {
      "path": "accounts/4702072783/containers/12078692",
      "accountId": "4702072783",
      "containerId": "12078692",
      "name": "Summon Core Share",
      "publicId": "GTM-TXMW5F9",
      "usageContext": [
        "WEB"
      ],
      "fingerprint": "1564081166834",
      "tagManagerUrl": "https://tagmanager.google.com/#/container/accounts/4702072783/containers/12078692/workspaces?apiLink=container"
    },
    "tag": [
      {
        "accountId": "4702072783",
        "containerId": "12078692",
        "tagId": "13",
        "name": "Best Bet Tag",
        "type": "ua",
        "parameter": [
          {
            "type": "BOOLEAN",
            "key": "nonInteraction",
            "value": "false"
          },
          {
            "type": "BOOLEAN",
            "key": "overrideGaSettings",
            "value": "true"
          },
          {
            "type": "LIST",
            "key": "fieldsToSet",
            "list": [
              {
                "type": "MAP",
                "map": [
                  {
                    "type": "TEMPLATE",
                    "key": "fieldName",
                    "value": "page"
                  },
                  {
                    "type": "TEMPLATE",
                    "key": "value",
                    "value": "{{Virtual URL Variable}}"
                  }
                ]
              }
            ]
          },
          {
            "type": "TEMPLATE",
            "key": "eventCategory",
            "value": "best bet"
          },
          {
            "type": "TEMPLATE",
            "key": "trackType",
            "value": "TRACK_EVENT"
          },
					{
            "type": "TEMPLATE",
            "key": "gaSettings",
            "value": "{{Google Analytics Variable - UPDATE ME}}"
          },
          {
            "type": "TEMPLATE",
            "key": "eventAction",
            "value": "click"
          },
          {
            "type": "TEMPLATE",
            "key": "eventLabel",
            "value": "{{Click Text}}"
          }
        ],
        "fingerprint": "1559600381905",
        "firingTriggerId": [
          "7"
        ],
        "tagFiringOption": "ONCE_PER_EVENT"
      }
    ],
    "trigger": [
      {
        "accountId": "4702072783",
        "containerId": "12078692",
        "triggerId": "7",
        "name": "Best Bet Trigger",
        "type": "LINK_CLICK",
        "filter": [
          {
            "type": "CSS_SELECTOR",
            "parameter": [
              {
                "type": "TEMPLATE",
                "key": "arg0",
                "value": "{{Click Element}}"
              },
              {
                "type": "TEMPLATE",
                "key": "arg1",
                "value": "div.bestBet > div > h3 > a"
              }
            ]
          }
        ],
        "waitForTags": {
          "type": "BOOLEAN",
          "value": "false"
        },
        "checkValidation": {
          "type": "BOOLEAN",
          "value": "false"
        },
        "waitForTagsTimeout": {
          "type": "TEMPLATE",
          "value": "2000"
        },
        "uniqueTriggerId": {
          "type": "TEMPLATE"
        },
        "fingerprint": "1559420253739"
      }
    ],
    "fingerprint": "0",
    "tagManagerUrl": "https://tagmanager.google.com/#/versions/accounts/4702072783/containers/12078692/versions/0?apiLink=version"
  }
}

Figure 1. GTM JSON file.

It helps to design with desired outcomes in mind and determining the tags and functionality to share depends on the intended audience. What is useful to your library and other libraries? Based on comments posted to the Summon listserv and feedback from other Summon libraries, I decided the first version of a shareable Summon GTM container should contain functionality to track:

  • Clicks on search results
  • Interactions related to a search result, such as emailing the citation or getting the permanent link
  • Clicks on database recommendations and best bets
  • Saving searches and exporting citations
  • All link clicks (a useful catchall)

In Google Analytics, collecting click data requires event tracking which translates to using Google Analytics event tags in the GTM container. There are multiple ways for the user to click to the full-text of a search result in Summon so several event tags were created in the Summon Standard GTM container to track all these link clicks. These resource outbound link event tags fire an event when a user clicks on a search result which sends Google Analytics that search result’s URL and link text allowing libraries to see what users are clicking on to access full-text.


Figure 2. Image of Summon search result.

Using the full package approach meant that the GTM container had to be fully operational when installed so a tag for tracking pageviews was included. By default, GTM does not work on a single page application like Summon. The workaround is to use a traditional Google Analytics pageview tag to track the entrance page and then use a virtual pageviews tag [4] that fires on all other “pageviews” during that session. Another necessary workaround involved adding a custom JavaScript variable that grabs Summon’s current URL fragment to overwrite the page value in most of the tags. This ensures the correct page URL is associated with the pageview or user click.

The Summon Standard GTM container comes with all of these preconfigured pageview and event tags. Ease of implementation was prioritized so importing the GTM container only required an update to the Google Analytics setting variable in order to sync the tags in the Summon Standard GTM container to the library’s Google Analytics property. GTM requires a Google Analytics setting variable for all Google Analytics related tags. The Summon Standard GTM container defaults to a dummy Google Analytics property in case this variable is not updated prior to publishing the container for the first time.

The original intent was to create one shareable Summon GTM container but it became apparent early in the design process that the container should support libraries wanting basic click data and libraries wanting to play with more advanced Google Analytics features such as custom dimensions to track item level information. Another GTM container called Summon Advance Share was developed which has all the tags of the Summon Standard Share GTM container in addition to utilizing custom dimensions on several event tags that pushes the item title, content type (for example journal, book, or ebook) and result position number when the user either interacts with or clicks on a search result. These custom dimensions are captured via additional custom JavaScript variables that locate and store these data points. While both Summon GTM containers comes with these custom dimension variables, only the Summon Advance Share GTM container have them automatically added to the correct event tags because implementing custom dimension requires additional setup to implement correctly. Details on configuring custom dimensions for the container are outlined in the install documentation.[5]

Test, Refine and Release

Testing is an essential practice in any development cycle. Testing GTM configurations is simple using GTM’s Preview Mode which loads a debug console window over the website in which the GTM container was installed. The debug console displays in real time when tags are fired (or not fired) and the data being sent via those tags to Google Analytics.[6] The debug console also contains a section displaying all the variables GTM interprets based on page activity and another section dedicated to the data layer so it’s clear what data is being collected and potential problems can be identified and fixed.


Figure 3. GTM Debug Console over Summon

The GTM testing process involved developing the desired tags, triggers and variables and then clicking the Preview button to enter the Preview mode to test in real time if the tags fired and sent the correct data. Since the Summon GTM containers are mostly Google Analytics tags, having Google Analytics’ real time reports open at the same time was useful because it shows how Google Analytics is receiving the data. However, this also implies the testing data is being collected like real user data in the Google Analytics property. Anyone wishing to keep their data as accurate as possible can create a new Google Analytics property to serve as a test Google Analytics account that can be swapped out with the real Google Analytics property when moving the GTM container into production.

Both Summon GTM containers were built within the GTM interface and tested using the Preview Mode on the Summon Preview Environment. This ensured that test data didn’t get collected along with real usage data. When satisfied with revisions, I added the Summon Advance Share GTM container to my library’s Summon instance and published the container using the correct Google Analytics property in the Google Analytics setting variable. Again, the live Summon website was tested using the GTM Preview Mode and monitoring of Google Analytics’ real time reports. After a week of testing and analyzing the new data, I shared the GTM containers with a few other Summon libraries to get their feedback about functionality and ease of implementation. I also tested the GTM installation on other Summon websites using the GTM Preview mode shared via a link. It provides a troubleshooting environment without needing access to another library’s GTM container or Google Analytics property.

After a few revisions, both Summon GTM containers were posted to GitHub as importable JSON files along with documentation on how to install GTM in the Summon Admin Console, the tags it contained and links to example Google Data Studio reports demonstrating how the new click data could be analyzed. An announcement about the Summon GTM containers was posted to the Summon listserv.


Figure 4. Example Google Data Studio Report.

The responses that followed demonstrated interest in further development of this project which may indicate a need to create additional shareable GTM containers for other widely used library applications.

Risks and Benefits to Using GTM to Share Code

While GTM is easy to configure, test and share code, libraries really should stop and reflect before committing to it. First determine if using GTM could have any ethical or privacy conflicts with your library’s policies or procedures. GTM’s Terms of Services specifically state Google “may collect information such as how the Service is used, and how and what tags are deployed”[7] and no doubt this service agreement will change over time. Rather than having an upfront monetary cost the GTM service is collecting data about how it is being used and that price may be too high in some cases. For concerns with user privacy, especially when using a tool like Google Analytics, Matomo is a good solution. Matomo is the open source alternative to Google Analytics and can also be implemented via Google Tag Manager[8] or Google Tag Manager could be completely replaced with Matomo Tag Manager[9]. If developing in either tag management system, consider if there’s a potential benefit to sharing your tags with the library community.

Another concern is importing tags requires a high level of trust as tag management systems can inject any HTML or JavaScript code into a website. GTM has version control that allows containers to revert to an earlier version which helps mitigate risk. Yet, significant damage can occur if newly imported tags are not properly tested prior to publishing.

There’s also a need to monitor the GTM configuration regularly as triggers and variables call upon specific elements in the code which, as Godmar Back and Annette Bailey point out, vendors can change without much warning.[10] GTM does not have an alert function to notify you when it’s not working as intended. My library uses the Summon Advance Share GTM container and I configured alerts within Google Analytics to notify me if one of the events receives zero hits in a day. It is highly unlikely that Summon would receive zero clicks to search results in a 24-hour period so that alerts me of a potential issue with the GTM configuration.

The risks are present, but so are the benefits to using GTM to share code among libraries. Since libraries share the same systems or applications, this approach can be adopted to other library web services such as link resolvers or SpringShare products where the source code has not been altered much. It saves libraries time in development and provides more opportunities for libraries that do not have this expertise in house. It also still allows libraries with the expertise to customize a shared GTM container for their own usage. It is a flexible solution.

Future Development

Based on the Summon GTM container project, the idea of creating additional GTM containers or tags for other common library applications is a definite possibility. The next step is to determine if there’s enough interest in these user communities for sharing code using a tag management system. Any library can participate in this process.

The Summon GTM containers will continue to evolve and anyone can join the development of additional tags. The next phase in the Summon GTM container cycle will release new tags such as those for tracking when a user clicks on an open access resource or creating a new event tag to monitor when a search occurs and the user doesn’t click on any of the search results, which could be another method for tracking failed searches. Another potential development is using a tag to load a script allowing Summon users to opt out of Google Analytics tracking. Additionally, there’s a plan to share Google Data Studio report templates for libraries to download and sync them to their Google Analytics property to analyze and visualize the data these containers provide. The intent is for libraries to better understand how Summon is being used for more informed decision-making.

Conclusion

Tag management systems like GTM are common technology with a lot of potential. Libraries can utilize GTM on their own or can start leveraging the power of the library community to develop and share better tags for the common library systems used. The Summon GTM containers are a preliminary example of what can be done.

Acknowledgements

Big thanks to Nicole Trujillo, Access & Discovery Librarian at the University of Colorado Boulder, for encouraging me to share my GTM work and for being willing to test some of my ideas. I also want to thank Patricia Farnan, Application Administrator in Discovery Services at the University of Notre Dame Australia, for being the first person to test the first iteration of the Summon Standard Share GTM container.

About the Author

Tabatha Farney is the Director of Web Services and Emerging Technologies for Kraemer Family Library at the University of Colorado Colorado Springs (UCCS). She has dabbled with GTM since it rolled out in 2012 and currently manages over ten containers for the library and the UCCS campus. Her passions include video games and gardening, but oddly enough she never got into the Harvest Moon series.

Notes

[1] Reidsma M. 2012. Summon-Stats. [cited 2019 August 28]. Available from: https://github.com/mreidsma/Summon-Stats

[2] Farney, T. GoogleTagManager-Summon. GitHub; https://github.com/tabathafarney/GoogleTagManager-Summon

[3] See, for example, GTM recipe sites such as Google Tag Manager Recipes. Analytics Mania; https://www.analyticsmania.com/google-tag-manager-recipes/#gref

[4] Ahava, Simo. #GTMtips: Track URL Fragments as Pageviews. Simo Ahava’s Blog; https://www.simoahava.com/gtm-tips/track-url-fragments-as-pageviews/

[5] Implementing Summon Google Tag Manager (GTM) Container. GitHub; https://github.com/tabathafarney/GoogleTagManager-Summon/blob/master/README.md

[6] Preview and debug containers. Tag Manager Help; https://support.google.com/tagmanager/answer/6107056?hl=en

[7] Google Tag Manager Terms of Service. Tag Manager Help; [cited 2019 August 28]. https://support.google.com/tagmanager/answer/7157428?hl=en

[8] Google Tag Manager (GTM) and Matomo. REQ; https://req.co/insights/article/google-tag-manager-gtm-and-matomo

[9] Tag Manager. Matomo; https://matomo.org/docs/tag-manager/

[10] Back G and Bailey A. 2014. Hacking Summon 2.0 The Elegant Way. The Code4Lib Journal. 26. [cited 2019 August 28]. Available from: https://journal.code4lib.org/articles/10018

Leave a Reply

 

ISSN 1940-5758