Track Logins and Signups with Google Tag Manager and Google Analytics

Why should you track logins and signups?

You might have more reasons to do this but here are the most common ones.

#1. Ability to segment visitors who are already your users. Here’s a situation: you are trying to analyze how visitors are behaving on your website’s homepage. Unfortunately, the majority of them are not clicking on that almighty Signup now button. With login tracking, you could possibly find out that X% of your visitors who land on the homepage are your existing users who just want to login.

Of course, you can segment such traffic not only with the login event in GA. There might be other options (like “exclude visitors who visit the /my-account/ area). Different ways to skin a cat and just I wanted to show you different possibilities.

#2. Ability to identify problems/errors in the login/signup process. If you are able to track not only the positive action (successful login/signup) but also errors, you would be able to identify where your visitors/users struggle and possibly initiate a change that eventually will increase the conversion rate (or make the user experience better).

#3. Ability to identify traffic sources that drive the most signups. Signup is a conversion and you must track that with your analytics (and marketing) tools to:

• Better understand which traffic sources work the best
• Measure the effectiveness of your marketing campaigns

There is no silver bullet: the login/signup tracking method depends on your site

There is no standard out-of-the-box way to track logins or signups with Google Tag Manager. The method that you will choose depends on how the login/signup process works. Here are some of the methods.

Method #1. Using popular CMS? Check for GTM plugins

If you are dealing with some popular content management system (CMS) (or e-commerce platform), there is a chance that you can install a Google Tag Manager plugin/extension that might also support login/registration tracking.

For example, WordPress.

If a website is using it as a Content Management System, you can install a plugin called GTM4WP. Once you do that and enter the GTM container ID (watch this video from 4:30), you can go to Settings > Google Tag Manager > Events (that’s happening in the WordPress admin panel) and enable checkboxes related to login and registration.

Save the changes in the plugin and check if it is pushing login/registration data to the Data Layer. Enable the GTM preview mode, log in as a user to your site (via frontend, not backend) and you should see an event in the preview mode.

If yes, that’s a good sign. Then create a Custom Event Trigger (go to Triggers > New > Custom Event) and enter the following settings (“Event name” field is case-sensitive):

Remember, that gtm4wp.userLoggedIn event name is specific just to that particular GTM plugin on WordPress. If you are using some plugin on another platform, the event name will be different (use it in the custom event trigger).

Finally, create a Universal Analytics tag that will fire when the user logs in and will send the event to Google Analytics. In GTM, go to Tags > New > Universal Analytics and enter the following settings. Assign the Custom Event Trigger we have previously created.

Speaking of the naming convention (what kind of values should you enter in the Event Category, Action, and Label), I have a dedicated chapter later in this blog post.

What about tracking registration/signups in WordPress with Google Tag Manager? Repeat the same process as with the login (but with a bit different settings):

• Create a custom event trigger with a different event name (that you’ll see in the GTM Preview mode after a successful registration)
• Create a new GA event tag with the following values:
  • Event category: login or registration
  • Event action: successful registration
  • Event label can remain empty
• Assign the custom event trigger to the aforementioned GA tag.

Remember: the naming convention is up to you (or what is already being used by a company). I am here just to give some tips/options. If you want to name events differently, feel free to do so.

When you save the tag(s), you also must test (in the preview mode + check the GA realtime reports). You can find an example in this video (start at 6:47).

In a nutshell, the process will look like this:

• Refresh the preview mode and the page of your website
• Register as a new user (a new event (related to the registration or login) will appear in the preview mode). Click it.
• Check if the GA registration tag has fired on that data layer event (in the preview mode)
• Then go to GA and check if the event is visible in Realtime > Events report

Method #2. Track when a success message appears

If a GTM plugin is not available in your case, you might want to check this: maybe a success message is displayed on a screen when the user logs in or signs up?

If yes, you could try to use the Element Visibility trigger in Google Tag Manager. I have a video tutorial where I show how to track forms with it. Use this video as an inspiration and apply this method in login/registration tracking as well.

However, keep in mind that most likely, you will need to get familiar with CSS Selector basics.

Method #3. Cooperate with developers

When it comes to login tracking with Google Tag Manager, I usually cooperate with developers and ask them to push info to the Data Layer about the login or signup.

If you’re more into video tutorials, you will find a step-by-step process below:

Together with those data layer events, I also ask developers to pass more info, for example:

• User ID
• Login/Signup method (email, google login, Linkedin login, etc.)
• Login/signup errors (together with actual error messages (but without personal info))

If you are not familiar with Data Layer and dataLayer.push, read these two resources first (otherwise, you might feel lost):

• Data Layer Tutorial
• dataLayer.push with examples

Speaking of successful registrations, you could ask a developer to activate a code that looks like this:

 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
	'event' : 'registration',
	'authenticationMethod' : 'email',
	'userId' : 'abc123' //this should be replaced with an actual ID
 });

Keep in mind that some values must be dynamically replaced by your developer’s code (e.g. userId must be replaced with an actual ID of a user who has just registered).

Then you need to create a custom event trigger (Triggers > New > Custom Event) and enter registration (because that’s the “event” in the dataLayer.push).

If you also want to send the authenticationMethod as an event label, you can create a Data Layer Variable with the following settings:

In this example, I will skip the userId field. You can learn how to configure it here.

Finally, create a Google Analytics tag. In GTM, go to Tags > New > Universal Analytics and enter the following settings:

Note that I have inserted the data layer variable in the Event Label field.

When you save the tag, you also must test it (in the preview mode + check the GA realtime reports). You can find an example in this video (start at 6:47). Event values will be different in that video but the principle of testing is the same.

In a nutshell, the process will look like this:

• Refresh the preview mode and the page of your website
• Register as a new user (a registration event will appear in the preview mode). Click it.
• Check if the GA registration tag has fired on that data layer event
• Then go to GA and check if the event is visible in Realtime > Events report

#3.1. What about logins and errors?

If you want to track logins, then you would need to ask the developer for another dataLayer.push that could look like this (reminder: these are just examples. You are free to name the parameters and their values differently if you wish.):

 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
	'event' : 'login',
	'authenticationMethod' : 'email',
	'userId' : 'abc123' //this should be replaced with an actual ID
 });

Then repeat the same process as you did with the registration (create a trigger for the login event, data layer variables (if the push contains some new vars), and a tag).

Want to track login/signup errors? Sure. Once again, you could ask a developer to push something like this:

 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
	'event' : 'error',
	'errorType' : 'login error', // or registration error
	'errorMessage' : 'error text' //this should be replaced with an actual message
 });

And once again, create Custom Event Triggers, Data Layer Variables, tags, and send this data to GA.

Other possible indicators that the user has just logged in/signed up

The aforementioned methods are the most common (based on my experience). If none of them are possible in your project, try to be creative and also play a detective.

You need to find a way how to identify that a visitor has just logged in (or signed up). Here are some ideas.

• Idea #1. Maybe page URL (after the visitor signed up) is decorated with a parameter ?registered=true that is visible only once after the successful registration? This will probably be super rare but maybe you’re lucky.
• Idea #2. Maybe a user who has just registered is always redirected to some onboarding page (with tutorials, etc.)? If the onboarding page’s URL is unique, you could use that as a trigger condition, for example, Page Path contains /welcome/
• You can find more inspirations on how to track logins by reading this form tracking guide.

What else is useful when you track logins and signups?

This decision is up to you and also depends on how the login/signup works on a website. I won’t dive too much into details here. Instead, here are some raw ideas that you might find useful.

• Authentication method. Signup with email address, signup with Google account, signup with Linkedin account, etc.)
• Registration step. If the registration process consists of multiple pages/steps, every completed step could be tracked. To distinguish which step was completed, you’d need to ask a developer to push that info to the Data Layer.
• Login/signup errors. Error tracking is a great way to identify holes in your signup/login process and fix them. Identifying the key problems in the signup process might help you increase the conversion rate.
• User ID. If you want to use it in Google Analytics, read this guide. Where can you get the user ID from? There are multiple options (that depend on your project). You could ask a developer, you could try to use the JavaScript variable, you could try to find a plugin that pushes that data too.