GTM Integration with AuthUI

## 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:

```json
{
"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.*