如何在单页 Flutter WEB 应用中跟踪用户旅程？答案

【问题标题】：How to track user journey in a single-page Flutter WEB app?如何在单页 Flutter WEB 应用中跟踪用户旅程？
【发布时间】：2020-08-01 01:18:18
【问题描述】：

我是谷歌分析的新手，想在我的单页 Flutter应用中跟踪用户的移动。该应用程序由使用 PageView 的 6 个页面组成。具体来说，我想知道用户在每个页面上停留的时间以及他们的鼠标点击事件/移动。我尝试了这个https://pub.dev/packages/google_tag_manager，但不知何故在我的分析帐户中没有跟踪任何事件（失败）。

这是我的实现方式


import 'package:google_tag_manager/google_tag_manager.dart' as gtm;

class HomeView extends StatefulWidget {
...
}

class HomeViewState extends State<HomeView> with TickerProviderStateMixin  {
  ...
  Widget build(BuildContext context ) {
    homePageLanded();
    ...
  }
  void homePageLanded(){
    gtm.pushEvent('homeView-landed');
  }
}

上面的代码是我尝试记录用户登陆 Homeview 事件的方式。同样，我对其他视图也做了同样的事情。

这是网站的主要结构。

PageView(
    physics: physics,
    pageSnapping: true,
    scrollDirection: Axis.vertical,
    controller: _pageController,
    children: <Widget>[
        HomeView(utilities, _pageController),
        ViewTwo(utilities, _pageController),
        ViewThree(utilities, _pageController),
        ViewFour(utilities, _pageController),
        ViewFive(utilities, _pageController),
    ]
),

是否需要任何其他步骤，例如在 Google Analytics 中设置？

提前谢谢你！！

--------------------更新--------

我不太确定“部署 GTM”的步骤，我在 index.html 的头部有这个脚本：

  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-162984477-1');

  <script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-5NHZTFT');
  </script>

【问题讨论】：

您是否在您的应用中部署了 GTM 容器？如果是这样，您选择了哪个版本？如果您确实部署了这样的标签，您在 GTM 的 GA 标签中使用了哪个版本的 GA？
感谢您的评论，刚刚为问题添加了更多信息。我可以举一个如何在颤动中正确部署 GTM 容器的示例吗？谢谢:)
我不懂 Flutter，也不确定你是在构建 Web 应用（html+js）还是原生 iOS/Android 应用？两者都存在 GTM 和 GA，那么一些上下文会有所帮助！我在您更新的 sn-p 中看到的是 2 个标签：一个用于 Google Analytics for web 的 gtag 语法，以及一个 GTM 标签（用于 web）（以及 2 个之间缺少的结束脚本标签）
如果您可以在 Chrome 桌面浏览器中测试您的“应用程序”，我建议您安装 chrome.google.com/webstore/detail/adswerve-datalayer-inspec/… 以更好地了解您的立场

标签： flutter dart google-analytics google-tag-manager flutter-web

【解决方案1】：

您需要在 index.html 文件中添加一些内容：

就在头像后面（XXXXXX 是您的 GTM ID）：

<head>
  <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>

  <script>
    dataLayer = [];
  </script> 
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script> 


..
.
..
.

然后在您的屏幕文件中：

import 'package:google_tag_manager/google_tag_manager.dart' as gtm;
import 'package:flutter/material.dart';


class HomeView extends StatefulWidget {
...
}

class HomeViewState extends State<HomeView> with TickerProviderStateMixin  {

pushGtm() {
    gtm.pushEvent('EventAppWeb', data: {'eventoApp': 'QUALQUEREVENTOAQUI'});
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body:MaterialButton(
            child: const Text('Test GTM'),
            onPressed: pushGtm,
          ),
    );
  }
}

【讨论】：