On this page:
Before implementing Google Tag Manager yourself, please review the options for obtaining the ASU Header. Some options provide the ASU Google Tag Manager code automatically bundled.
Install on test site first
To implement Google Tag Manager, insert the appropriate snippets found below within the body tag of your HTML as close to the top of the page as possible. Further details can be found in the Google Tag Manager Quickstart Guide.
Most ASU sites should implement the ASU Universal GTM.
Enterprise sites should implement the ASU Enterprise QA GTM on their "DEV" environment, and the ASU Enterprise Production GTM on their "QA" and "Production" environments. This may be configured using environmental variables. Each environment has its own GTM ID associated with it and care must be taken to use the appropriate GTM ID for each application environment.
Some units have their own GTM IDs. When multiple GTM IDs need to be used in a single site or application, follow the guidance on Multiple Containers on a Page.
Paste this code as high in the <head> tag of the page as possible.
<!-- Google Tag Manager ASU Universal-->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KDWN8Z');</script>
Additionally, paste this code immediately after the opening <body> tag.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KDWN8Z"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager ASU Universal -->
Paste this code as high in the <head> tag of the page as possible.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PX7M299');</script>
<!-- End Google Tag Manager -->
Additionally, paste this code immediately after the opening <body> tag.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PX7M299"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Paste this code as high in the <head> tag of the page as possible.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W3FGR6T');</script>
<!-- End Google Tag Manager -->
Additionally, paste this code immediately after the opening <body> tag.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3FGR6T"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Paste this code as high in the <head> tag of the page as possible.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WPVTBHL');</script>
<!-- End Google Tag Manager -->
Additionally, paste this code immediately after the opening <body> tag.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WPVTBHL"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
The data layer is an object used by Google Tag Manager to pass information to Google Analytics based on click and change events associated with tags in your site or application. If you are using the Unity Bootstrap Theme (`unity-bootstrap-theme` package), you will get the data layer attributes without additional effort if you copy the Unity markup. You must first enable GTM and the data layer, as described, below.
Follow the instructions for creating the Data Layer after setting up Google Tag Manager in your site or web application.
Ensure your markup includes appropriate `data-ga` and `data-ga-*` attributes for your purpose. The Unity Bootstrap Theme (`unity-bootstrap-theme`) includes these attributes in its reference code. The values of these attributes are used when the data layer event is submitted for click or change events on the tag, but to enable that to happen, you must first...
Add event listeners to your code to capture click and change events related to your `data-ga` attributes and to push that event to the data layer. As a help to get you started, the `unity-bootstrap-theme` package's `dist/js/data-layer.js` file can serve as a starting point or as a reference for implementing your own data layer push code.
You should be initilaizing the GA push events and header scroll behavior similar to the following
code snippet if you implement the Bootstrap header:
<script type="text/javascript" src="example/path/to/@asu/unity-bootstrap-theme/js/data-layer.js"> </script>
<script type="text/javascript" src="./@asu/unity-bootstrap-theme/js/global-header.js"> </script>
Then, the following code should be placed towards the bottom of your html doc or deferred. This initializes the data layer and the global header classes
<script>
window.initDataLayer();
window.initGlobalHeader();
</script>