Last Updated: Jan 2, 2025
Overview
This article explains how to add Google Analytics to the Universal Login.
Applies To
- Google Analytics
- Universal Login
Solution
Add Google Analytics to the Universal Login page via page templates by adding the script tag for Google’s Analytics script.
- Review the following Google Documentation for details on what to update: Get started with Tag Manager
The following sample shows how to update the page template with the tracking code using the management API:
curl --location --request PUT 'https://TENANT-DOMAIN.auth0.com/api/v2/branding/templates/universal-login' \
--header 'Content-Type: text/html' \
--header 'Authorization: Bearer eyJhbG..redacted' \
--data '<!DOCTYPE html><html>
<head>
{%- auth0:head -%}
<!-- 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-ABCDEFGH'\'');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{%- auth0:widget -%}
</body>
</html>'
Add Google Analytics to the Universal Login page via page templates by adding the script tag for Google’s Analytics script.
- Review the following Google Documentation for details on what to update: Get started with Tag Manager
The following sample shows how to update the page template with the tracking code using the management API:
curl --location --request PUT 'https://TENANT-DOMAIN.auth0.com/api/v2/branding/templates/universal-login' \
--header 'Content-Type: text/html' \
--header 'Authorization: Bearer eyJhbG..redacted' \
--data '<!DOCTYPE html><html>
<head>
{%- auth0:head -%}
<!-- 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-ABCDEFGH'\'');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{%- auth0:widget -%}
</body>
</html>'
The template can be further customized to work only for specific views. Here is another sample for the tracking that works only on signup pages:
curl --location --request PUT 'https://TENANT-DOMAIN.auth0.com/api/v2/branding/templates/universal-login' \
--header 'Content-Type: text/html' \
--header 'Authorization: Bearer eyJhbG..redacted' \
--data '<!DOCTYPE html><html>
<head>
{%- auth0:head -%}
{% if prompt.name == "signup" or prompt.name == "signup-id" or prompt.name == "signup-password" %}
<!-- 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-ABCDEFGH'\'');</script>
<!-- End Google Tag Manager -->
{% endif %}
</head>
<body>
{% if prompt.name == "signup" or prompt.name == "signup-id" or prompt.name == "signup-password" %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endif %}
{%- auth0:widget -%}
</body>
</html>'
The following section of the template code helps render the tracking code conditionally:
{% if prompt.name == "signup" or prompt.name == "signup-id" or prompt.name == "signup-password" %}
// Insert the Google tracking code within this block
{% endif %}
NOTE: To use a custom page template with Universal Login (not Classic Login), a custom domain has to be configured and set on the application calling the /authorize endpoint. This is not required when using Classic Login.
When using the Classic Login page, update the HTML template from the dashboard’s Advance settings view in the Branding > Universal Login section.
