Adding google analytics to new universal login experience

Help
,
1

Hi guys,

Is it possible to add google analytics to the NEW universal login experience?
As I understood, with the classic universal login it is possible to customize the login page using the HTML template and insert the google analytics script https://cdn.auth0.com/js/analytics/1.3.1/analytics.min.js in the template.

But how do I do that for the new universal login?
Many thanks!

2

New Universal Login Experience is rendered on server and does not support customization like Classic Login Experience.

The key structural difference from the Classic Experience is that the former uses Javascript widgets in all the pages, while the New Experience is rendered on the server and does not require Javascript.

As we can not customize it, I do NOT think it will be possible to add google analytics like Classic Login Experience. It has some limitation as It is not yet at feature parity with the Classic Experience

3 Likes
3

Yep that’s true. Basically New Universal Login Experience was designed to be much more light-weight in comparison to the Classic one but at the cost of being less customisable and feature packed

1 Like
4

Hey there, if I can customize the page, can I add script tag?

Thanks!

5

Not sure about it but I’m pretty sure we didn’t design it the way to work like that

6

When I try to set to the template below I get following error:

{"statusCode":400,"error":"Bad Request","message":"The template must contain a single auth0:head tag and at least one auth0:widget tag.","errorCode":"invalid_body"}

There is an issue with my request? Or you designed not to work this way?
If I remove the script tag it works.

<!DOCTYPE html>
<html>
   <head>
      {%- auth0:head -%}

      <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-XXXX');
      </script>
      

      <title>Custom Title</title>
   </head>
   <body>
       {%- auth0:widget -%}
    
       <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    </body>
</html>
7

That’s it because we do not support that unfortunately

8

I just checked with bootstrap script tag and it works.
The issue is because the google tag manager script is adding elements to the DOM?

9

I don’t know to be honest. For sure there’s some hacky workaround that you will need to figure out yourself as unfortunately we do not support it officially.

10

I managed to add GTM (Google Tag Manager) to the template.
Simply add the script tag, but make sure to use double quotes " and not single ' everywhere in the code.

1 Like
11

Perfect! Thanks for sharing with the rest of community!

1 Like
12

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.