这个社区提示将带您逐步实现Mixpanel和googletagmanager来跟踪页面视图、链接点击和表单提交。用Google标签管理器实现Mixpanel的利弊分析googletagmanager（GTM）是一个免费的应用程序，它允许用户远程修改和激活在web或移动应用程序中触发的某些代码片段，而无需直接访问代码库或应用程序商店重新提交。GTM的工作原理是让您安装一个单独的代码段，该代码段获取并运行您在GTM自己的UI中基于您识别的"触发器"设置的任何自定义脚本"标记"。如果您负责产品的分析，GTM可能特别方便，但是需要占用开发人员的时间才能对代码库进行任何更改。该软件允许您通过一个相对直观的用户界面来修改代码的独立部分，而不会有太大的风险来修改或破坏站点的现有功能。然而，除了好处之外，直接安装Mixpanel通常比GTM实现更可取。GTM非常适合非常简单的基于页面视图的实现，但是Mixpanel真正的强大之处在于根据特定的用户活动跟踪可操作的数据，而不仅仅是页面加载。但是，通过GTM添加更具体的、基于事件的跟踪会显著增加触发器和变量的复杂性，并且需要您与开发人员一起创建"GTM友好"的站点结构和与GTM数据层的交互。在这一点上，直接集成Mixpanel会更快更容易。如果您需要在移动设备上添加事件，而无需更改代码或重新提交到应用程序商店，我们的无代码事件跟踪功能允许您在MIxpanel的UI中使用简单的图形工具动态添加事件。直接实现仍然是一种选择，即使您已经在为其他标记使用GTM。GTM和直接安装的Mixpanel可以和平共处。简而言之：如果可能的话，我们建议直接实现Mixpanel并在GTM之前实现。我们提供了一个完整的开发人员参考资料，您只需10-30分钟就可以在Javascript、iOS、Android和各种服务器端库上运行。我们无畏的支持工程师团队也已准备就绪，随时准备回答您可能遇到的任何实施问题。使用GTM跟踪标记、触发器和变量GTM集成有三个主要组件，我们应该在继续之前定义它们。标记是您希望在某个时刻运行的代码片段。但是，标记永远不会单独执行。相反，它依赖于触发器——条件语句，告诉标记何时触发。最后，软件企业有哪些，变量是触发器可以在其条件语句中检查的值（例如，页面URL、DOM元素ID、表单文本）。因此，如果您想在站点的每个页面视图上激发特定的Javascript片段/关于.html第页，您可以使用内置URL变量并为{URL}}}包含的内容设置触发器关于.html.安装Mixpanel库与任何Javascript实现一样，第一步是实现Mixpanel库片段。在标准实现中，这包括1）从我们的JavaScript文档中复制代码段，2）用项目标记替换"YOUR TOKEN"，以及3）将定制的代码段粘贴到所有页面的标签中。对于GTM，以下流程适用：添加一个新的标记并选择"自定义HTML"作为类型。让我们给它一个简单的描述性标题，比如"Mixpanel库"。这个代码段只包含库初始化代码段，它支持其他Mixpanel方法（例如。混音面板.track)但不会自己开始跟踪事件。将整个库片段粘贴到"HTML"字段中。请注意，您复制的库已经保存在标记中。当您添加自己的自定义JS时，您需要自己包含这些标记。打开高级设置并将"标记触发优先级"设置为0以上的任何值，注意编号较高的标记将在编号较低的标记之前激发。重要的是，您需要给库片段一个比跟踪调用更高的优先级。因此，物联网，如果您将优先级设置为"5"，并将所有其他Mixpanel跟踪调用优先级保留为空，则它们将默认为0（最低优先级），并在库片段激发后激发。选择"所有页面"作为触发器。您需要确保Mixpanel库在每个页面上都可用，即使您只跟踪某些页面上的事件。保存标记。你的googletagmanager代码段现在将在安装它的每个页面上加载Mixpanel库。跟踪页面视图事件现在您已经安装了Mixpanel库，我们可以设置一个简单的页面视图事件，它动态地包含页面的路径（例如"/about/反馈.html）作为事件属性。对于本例，我们将使用GTM提供的内置"Page Path"变量。默认情况下应该启用它以供使用，但是您可以在变量选项卡中再次检查它。要开始跟踪页面视图，我们将使用标准混音面板.track（）功能。创建新的自定义HTML标记，并在"配置标记"步骤中输入以下标记：var pagePath={{Page Path}}；混音面板.track（"页面加载"，{"页面路径"：页面路径）；请注意，我们正在将内置的Page Path变量合并到代码中。这告诉GTM动态地获取页面路径并将其作为一个变量收集，我们随后将其与跟踪的事件一起包含。你可以使用任何你喜欢的变量，也可以创建你自己的变量。假设您将Mixpanel库代码段的"Tag firing priority"设置为任何大于0的值，则可以将该标记上的字段留空。它将默认为0，并始终在库片段之后激发。选择"所有页面"作为触发器并保存标记。你已经准备好了你的第一个跟踪事件！因为GTM将在所有实现它的页面上触发它，返利系统，所以您不必担心手动将此代码添加到每个新页面。跟踪链接点击更详细的跟踪也可以在GTM中与一些额外的工作。对于比页面视图更高级的内容，开发人员应该使用参数或类似参数"标记"站点元素。这个"id"参数将帮助您确定特定元素的目标，并为您的分析获取更细粒度的数据。首先在变量选项卡中启用"Click ID"变量。我们将使用它来设置触发器，并使用事件属性标识正在单击的链接。创建一个新触发器来捕获所有Mixpanel链接单击。以下配置将跟踪任何链接单击，并确保请求有机会在页面更改之前发送：设置一个新的"Link Click"自定义HTML标记。以下代码将获取链接的ID并将其设置为"链接已单击"事件的属性，以便于事件筛选/分段：html格式var linkID={{Click ID}}；混音面板.track（"Link Clicked"，{"Link Name"：linkID}）；请注意，我们正在使用混音面板.track（），不是特别的mixpanel.track_链接（）功能。我们不需要专门的跟踪和跟踪我们所创建的链接。要完成设置，请选择Fire On下的"Click"，然后选择您在步骤2中创建的链接Click触发器。跟踪表格和登记设置表单提交时激发的代码也很容易。在本例中，我们将跟踪事件、设置别名并为新注册的用户创建人员配置文件。同样，这里的最佳实践是在源代码中为要识别或操作的任何元素设置特定的"id"参数。在本例中，让我们假设用户名输入字段，其中。我们将使用这个ID来获取字段的值。首先在Variables选项卡中启用"formid"变量。我们用这个来设置扳机。创建一个新触发器来捕获您的注册表单提交。以下配置将跟踪表单，并确保在页面更改之前有机会发送请求：设置一个新的"注册"自定义HTML标记。以下代码将跟踪注册事件，将用户的ID设置为别名以供将来登录时使用，并基于用户的新用户名创建人员配置文件：混音面板.track（"注册"）；变量用户标识=文档.getElementById（'loginUID'）.value//提交时获取文本mixpanel.alias（用户名）；mixpanel.people.set（{"$name"：userID}）；就像上面的链接跟踪示例一样，我们使用混音面板.track（），不是特别的mixpanel.track_表单（）功能。我们创建的自定义触发器处理表单标识并实现必要的短暂延迟，因此我们可以使用标准跟踪功能。在本例中，我们只是从输入字段获取用户ID。实际上，您可能正在从服务器或用户表中获取新的用户ID，在这种情况下，免费云服务器试用，您需要与开发人员一起将其加载到GTM数据层并将其设置为变量。要完成设置，物联网水表，请选择Fire On下的"Click"，然后选择您在步骤2中创建的表单提交触发器。你准备好了！有了这三种情况，就可以通过GTM构建Mixpanel集成。如需更多支持，请随时发送电子邮件至support@mixpanel.com和一个聪明的人说话，快点。