GTM Integration with AuthUI

[fungc-io]

Message

Add Google Tag Manager to Authgear. GTM is a free tool to add tracking on a website with little coding.

Background

We would like to track the channel source of our signups in the Authgear marketing site. Currently the link click to the sign up page is tracked. However we lose track after that. This is a pain point experienced by other developers as well. It will be great if we can add native GTM integration to Authgear for other creators too. In addition, this is a popular integration among SaaS, it is the most common way to add tracking to an application.

Goal and Objectives

• Make it easy for users to integrate and track signup/login sources of users from other marketing landing pages.
• Fire GTM Custom Events in the signup flow for the Portal on Web (AuthUI) The event should prefixed with the "Authgear" and then the action

For Example:

{
  "event":"AuthgearSignup"
}

List of events:

• AuthgearSignup
• AuthgearLogin

User flow

1. In Portal > Integration > Google Tag Manager
2. Set the GTM Container ID (GTM-123456) then click save.
3. Sign up and login events are fired.

To properly set the GTM event into GA or other analytics platform like Facebook events manager. They should read the docs, which will include steps like in this article Remind the user to set up cross domain tracking to measure the number accurately.

Design: https://www.figma.com/file/swXJYkdXuPsLyA5q0aHu1r/Authgear-UI---Fung?node-id=10%3A445

Appetite

2 weeks

Reference

Ref: https://support.google.com/tagmanager/answer/7679219?hl=en Ref: https://developers.google.com/tag-platform/tag-manager/web/datalayer Ref: https://support.google.com/tagmanager/answer/6164469?hl=en

View the comment below for Technical Problems and alternative approach.

[chpapa]

Updated draft (not shaped, still a few research need to be done)

Objective: Make it easy for users to integrate and track signup/login sources of users from other marketing landing pages**

• Allow users to configure Google Analytics and (1 more common analytics / CDP, e.g. Segment.io or Mixpanel) in Portal
• Once configurated GA, the AuthUI will preserve GTM tags passed to its URL, and send pre-defined events
  • List of events, and what data to preserve, might be different between integrations
  • The events should contain at least high-level ones (e.g. LandingSignup, LandingLogin, SignupCompleted, LoginCompleted, Setting), but a more fine-grinded one could be available too?
• Relevant Docs and Marketing Page should be updated

Technical Problems

• It might be easy for most analytics SDK to configure and intercept links to AuthUI Signup / Login, but JS SDK for the SPA situation need some research
• The above scenario only consider web, mobile (Android: Google Play Install Referrer and iOS needs extra research)

Alternative Approach

• Considered to collect UTM tags on AuthUI sign up / login page, and pass those data as custom attributes or in post sign up / login hooks. However it seems more complicated and encourage mis-use of Authgear Custom Attributes to store marketing data.

[fungc-io]

Portal Design can be found here: https://www.figma.com/file/swXJYkdXuPsLyA5q0aHu1r/Authgear-UI---Fung?node-id=10%3A445

Nav item "Integration" will be between "User Profile" and "Billing"

[fungc-io]

@louischan-oursky The tracking across domain feature is described here: https://support.google.com/tagmanager/answer/6164469?hl=en

[louischan-oursky]

Our integration with Google Tag Manager is declarative. The primary button on each page has data-authgear-event attribute. The value are listed in the following list.

• authgear.button.change_password
• authgear.button.change_additional_password
• authgear.button.create_password
• authgear.button.change_login_id
• authgear.button.remove_login_id
• authgear.button.resend_oob_otp
• authgear.button.enter_oob_otp
• authgear.button.enter_password
• authgear.button.enter_recovery_code
• authgear.button.enter_totp
• authgear.button.send_reset_password_code
• authgear.button.sign_in
• authgear.button.sign_up
• authgear.button.sign_out
• authgear.button.oauth
• authgear.button.reset_password
• authgear.button.continue_with_current_account
• authgear.button.use_another_account
• authgear.button.remove_biometric
• authgear.button.schedule_account_deletion
• authgear.button.connect_oauth
• authgear.button.disconnect_oauth
• authgear.button.resend_verification_code
• authgear.button.update_profile
• authgear.button.regenerate_recovery_code
• authgear.button.download_recovery_code
• authgear.button.remove_totp
• authgear.button.remove_oob_otp
• authgear.button.setup_oob_otp
• authgear.button.setup_totp
• authgear.button.enter_verification_code
• authgear.button.revoke_session
• authgear.button.revoke_session_group
• authgear.button.revoke_all_sessions

To integrate, the developer should follow these steps.

1. Create a user-defined variable of Variable Type "Data Layer Variable"
2. Set "Data Layer Variable Name" to gtm.element.dataset.authgearEvent.
3. Create a trigger of type "Click" that fires on "Some Clicks"
4. Add a condition to the trigger "Click Element" "matches CSS selector" "[data-authgear-event]"
5. Create a "GA4 Configuration" tag. Set its trigger to Page View and fire "Once per page"
6. Create a "GA4 Event" tag. Set the "Event Name" to be the gtm.element.dataset.authgearEvent variable. Set the trigger to be the trigger we created above.

[louischan-oursky]

https://support.google.com/tagmanager/answer/6164469?hl=en

That link is for Universal Analytics. It seems that the latest version of GA is 4. I couldn't find the equivalent for version 4. This is how I add additional domains though.

1. Create a web Data Stream with a valid URL.
2. Edit the data stream and click "More Tagging Settings"
3. Click "Configure your domains"
4. Add any additional domains

[fungc-io]

I was testing the setup and found that the "Sign in with Google" do not trigger the Tag for "authgear.button.oauth"

---

GTM Variables when Sign in with email, tag was fired

GTM Variables when Sign in with Google, tag was not fired

---

Integration method was the same as commented by @louischan-oursky https://github.com/authgear/authgear-server/issues/1747#issuecomment-1073446229

[louischan-oursky]

The solution is to create the form submission trigger to capture this "click". The form submission trigger has an option to wait for GTM to fire the event before submitting the form. However, I cannot figure out why GTM in this particular case mistakenly detects this as a regular click instead of a form submission.