How to track user journey in a single-page Flutter WEB app?

flutter dart google-analytics google-tag-manager flutter-web

1,344

you need to add some things to your index.html file:

right after the head(XXXXXX is your 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> 


..
.
..
.

then in your screen file:

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

1,344

Author by

Léo Yu

Updated on December 12, 2022

Comments

Léo Yu over 1 year
I am new to google analytics, want to track the user's movement in my single-page Flutter app. The app consists of 6 pages using PageView. Specifically, I want to know how long a user stays on each page and their mouse click-events / movements. I tried this https://pub.dev/packages/google_tag_manager but somehow no events are tracked in my analytics account (failed).

Here is how I implemented
```
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');
  }
}
```
The code above is how I tried to log the event of users land on the Homeview. Similarily I did the same to the other views.

This is the main structure of the site.
```
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),
    ]
),
```
Are there any other steps required like setting up in Google Analytics?

Thank you in advance!!

--------------------UPDATE--------------------

I am not quite sure the step 'deploying GTM', I have this script in head of 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>
```
- Open SEO about 4 years
  
  Did you deploy deploy a GTM container in your app ? If so, which version did you choose ? Which version of GA did you use in your GA tag in GTM, in case you did deploy such a tag ?
- Léo Yu about 4 years
  
  Thanks for commenting, just added more information to the question. May I have an example of how to deploy a GTM container properly in flutter? Thanks :)
- Open SEO about 4 years
  
  I don't know Flutter, and I'm not sure if you are building a web app (html+js) or a Native iOS / Android App ? GTM and GA exists for both, then some contexte would help ! What I see in your updated snippet are 2 tags: one gtag syntax for Google Analytics for the web, and one GTM tag (for the web) (and a missing closing script tag between the 2)
- Open SEO about 4 years
  
  In case you can test your 'App' in a Chrome desktop browser, I suggest you install chrome.google.com/webstore/detail/adswerve-datalayer-inspec/‌… to better understand where you stand
- developer about 2 years
  
  @Léo Yu Hi, did you get any solution to add google tag manager in flutter web? can we log all events automatically by adding tag manager code same as adding in normal PHP/or other website?