Flutter 如何在一个单页颤振WEB应用程序中跟踪用户旅程？

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

下面是我如何实现的

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');
  }
}

将“package:google_tag_manager/google_tag_manager.dart”作为gtm导入；
类HomeView扩展了StatefulWidget{
...
}
类HomeViewState使用TickerProviderStateMixin扩展状态{
...
小部件构建（构建上下文）{
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),
    ]
),

PageView(
物理学：物理学，
页面捕捉：对，
滚动方向：轴垂直，
控制器：_pageController，
儿童：[
HomeView（实用程序，_pageController），
视图二（实用程序，_pageController），
视图三（实用程序、页面控制器），
ViewFour（实用程序，_pageController），
ViewFive（实用程序，_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>

window.dataLayer=window.dataLayer | |[]；
函数gtag（）{dataLayer.push（参数）；}
gtag（'js'，新日期（））；
gtag（“配置”、“UA-162984477-1”）；
（函数（w，d，s，l，i）{w[l]=w[l]||【】；w[l]。推送（{'gtm.start'：
new Date（）.getTime（），事件：'gtm.js'}）；var f=d.getElementsByTagName[0]，
j=d.createElement，dl=l！=“数据层”？“&l=”+l:“”；j.async=true；j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl；f.parentNode.insertBefore（j，f）；
})（窗口、文档、“脚本”、“数据层”、“GTM-5NHZTFT”）；

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

在头部之后（XXXXXX是您的GTM ID）：

数据层=[]；
（函数（w，d，s，l，i）{w[l]=w[l]||【】；w[l]。推送（{'gtm.start'：
new Date（）.getTime（），事件：'gtm.js'}）；var f=d.getElementsByTagName[0]，
j=d.createElement，dl=l！=“数据层”？“&l=”+l:“”；j.async=true；j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl；f.parentNode.insertBefore（j，f）；
})（窗口、文档、“脚本”、“数据层”、“GTM-XXXXXX”）；
..
.
..
.

然后在屏幕文件中：

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,
          ),
    );
  }
}

import'包：作为gtm的google_tag_manager/google_tag_manager.dart；
进口“包装：颤振/材料.省道”；
类HomeView扩展了StatefulWidget{
...
}
类HomeViewState使用TickerProviderStateMixin扩展状态{
pushGtm（）{
gtm.pushEvent（'EventAppWeb'，数据：{'eventoApp'：'QUALQUEREVENTOAQUI'}）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：材料按钮(
子项：常量文本（“测试GTM”），
按下：pushGtm，
),
);
}
}

您是否在应用程序中部署了GTM容器？如果是，您选择了哪个版本？如果您确实部署了这样的标签，那么您在GTM中的GA标签中使用了哪个版本的GA？感谢您的评论，刚才为问题添加了更多信息。我可以举一个如何在颤振中正确部署GTM容器的示例吗？谢谢：）我不知道Flatter，我也不确定你是在构建一个web应用程序（html+js）还是一个原生的iOS/Android应用程序？GTM和GA都存在，那么一些contexte会有所帮助！我在你更新的代码片段中看到的是两个标签：一个gtag语法用于Google Analytics for the web，一个GTM标签（用于web）（两个标签之间缺少一个结束脚本标签）如果你可以在Chrome桌面浏览器中测试你的“应用”，我建议你安装它以更好地了解你的位置非常好的答案。。

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,
          ),
    );
  }
}