与 Google Tag Manager 集成¶

Authany 允许您使用 Google Tag Manager 为项目添加第三方用户分析工具。

什么是 Google Tag Manager？¶

Google Tag Manager（GTM）是 Google 推出的一款标签管理工具，让您无需修改网站源代码即可轻松添加营销标签。

标签可以帮助您追踪网站或应用的流量和用户行为。

在本指南中，我们将向您展示如何将 Google Tag Manager 添加到您的 Authany 项目，并向 Google Analytics 发送数据。您还可以配置 Google Tag Manager，将 Authany 项目中的数据发送给 Facebook 等其他服务商提供的营销标签。

前置条件¶

要在 Authany 中设置 Google Tag Manager 和 Google Analytics，您需要具备以下条件：

Authany 账号
Google Tag Manager 账号
Google Analytics 账号

第一部分：将 Google Tag Manager 连接到 Authany 项目¶

将您的 GTM 账号连接到 Authany 的过程非常简单，只需以下两个步骤即可完成。

第 1 步：获取 GTM 容器 ID¶

Google Tag Manager 允许您创建用于存放营销标签的容器。每个容器都有一个唯一的 ID，您需要用这个容器 ID 将 GTM 容器连接到 Authany。

要获取容器 ID，请登录 GTM 并进入控制台首页。您可以在此看到所有容器及其 ID 的列表。请记下您想连接到 Authany 的容器的 ID。

如果您还没有为 Authany 项目创建容器，请点击 Create Account 创建一个新容器。将您 Authany 项目的域名填写为容器名称，并选择目标平台。在本示例中，我们将选择 Web 作为目标平台。

第 2 步：将 GTM 容器 ID 添加到 Authany¶

首先，登录 Authany 管理台，选择您的项目，然后进入集成。

点击 Google Tag Manager 插件旁边的连接按钮，打开配置页面。

粘贴您在上一步中获取到的 GTM 容器 ID，然后点击保存按钮。至此，您的 GTM 容器已成功连接到 Authany。接下来的步骤中，我们将向您展示如何创建跟踪标签并向 Google Analytics 发送数据。

第二部分：追踪流量并向 Google Analytics 发送数据¶

Google Analytics 是我们可以在 GTM 中管理的营销标签之一。在本部分指南中，我们将设置一些标签来追踪页面浏览量以及点击链接或按钮等用户事件。这些标签会将数据发送给 Google Analytics。

第 1 步：设置 Google Analytics 数据流¶

要创建向 Google Analytics 发送数据的标签，您需要在 Google Analytics 上有一个正在使用的数据流。在为 Google Analytics 创建新标签时，GTM 需要该数据流的详细信息。

要创建数据流，请登录 Google Analytics，然后进入 Admin 设置页面。

为您的 Authany 项目创建一个新的 Google Analytics 媒体资源，或选择一个现有的媒体资源。点击该媒体资源下的 Data Streams 项目，查看所有数据流，并为您的 Authany 项目添加一个新的网络数据流。

请记下该数据流的 Measurement ID，我们稍后创建新标签时会用到它。

第 2 步：在 GTM 中创建一个新的用户自定义变量¶

在开始向 Google Analytics 发送数据之前，让我们先在 Google Tag Manager 中创建一个新变量。

返回 GTM，为您的项目选择正确的容器。

接下来，点击左侧导航栏中的 Variables 项目，并使用以下详细信息创建一个新的用户变量：

Variable type：Data Layer Variable
Data Layer Variable Name：gtm.element.dataset.authgearEvent

完成后，将变量保存为 "gtm.element.dataset.authgearEvent"，然后继续下一步。

第 3 步：创建点击触发器¶

从侧边栏进入 Triggers，并使用以下详细信息创建一个新触发器：

Trigger type：Click > All Elements
This trigger fires on：Some Clicks

Authany 对 GTM 的实现采用声明式方式。每个页面上的主按钮都带有 data-authgear-event 属性。我们将使用该属性为 "Some Clicks" 设置一个条件。请按下图配置 "Some Click"：

接下来，将该触发器保存为 "Authany-btn-click"，然后继续。

第 4 步：创建 Page View 标签¶

从侧边栏进入 Tags，并使用以下配置创建一个新标签：

Tag type：Google Analytics > Google Tag
Tag ID：<您的 Tag ID 即 Google Analytics 中该数据流的唯一 Measurement ID (详见第二部分第 1 步)>

接下来，展开 Advanced Settings 部分，将 Tag firing options 设置为 Once per page。

现在，滚动到新标签的 Trigger 部分，选择 All Pages (page view) 作为触发器。

将此新标签保存为 "Auth-gear-pageview"，然后继续。

第 5 步：创建 Event 标签¶

在这一步中，创建另一个标签，使用以下配置：

Tag type：Google Analytics > Google Analytics: GA4 Event
Measurement ID：<您 Google Analytics 数据流的 Measurement ID>
Event Name：gtm.element.dataset.authgearEvent

接下来，将该标签的触发器设置为我们之前创建的 "Authany-btn-click" 触发器。

将该标签保存为 "Authany-event-tag"，然后继续预览整个设置，或直接发布上线。

结语¶

在 Google Tag Manager 中发布更改后，当用户在您的项目中产生点击量，或点击带有 data-authgear-event 属性的按钮时，您应该能在 Google Analytics 中看到相应的数据。

以下是 data-authgear-event 属性的取值列表：

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