2

I'm trying to implement a visitor-counter on a website built entirely with flutter-web and I'm trying to accomplish this with nothing but plain dart code and some packages from pub.dev.

But the problem which has been bugging me is that I need to find a way to uniquely identify users based on their browsers or their devices so that I don't end up incrementing the counter for the same person again and again upon a revisit.

So far what I've thought is that I could use firestore for keeping track of the total number of visitors and display the same on the webpage upon startup and use some caching package like dcache or localstorage (like described here) to keep track of users who are re-visiting the same webpage.

Is there any better approach to this problem? Any help would be appreciated

(ps: I have no prior web dev experience)

Ashutosh Singh
  • 1,107
  • 17
  • 28

2 Answers2

1

Since you talk about users, I immediately think of using Firebase Authentication.

There are two ways you could use that here:

  1. With anonymous authentication, you could create a unique ID for each user without requiring them to enter credentials.

  2. If you want to be able to identify the same user on different browsers/devices, they will have to sign in with one of the supported providers (email/password, phone number, email link, facebook, google, etc).

No matter which one you choose, each user will now have a unique ID (called UID in Firebase terms), which you can use to identify them in the database. For example, you could create a document for each user in the database with their UID as the ID of that document. That way you're guaranteed that each user will have no more than a single document.

You'll still need to count the documents, for which I recommend checking out the distributed counter extension.

Also consider if you want to use the Firebase Realtime Database instead of Firestore here, as it might give you a simpler pricing model, and has a built-in presence system. You'd still use Firebase Authentication as before, but just swap the database.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Thanks a lot for the response! Apart from using anonymous auth, do you think using [localstorage](https://github.com/flutter/flutter/issues/35116) would be a good option for keeping a record of users who have already visited? – Ashutosh Singh Nov 19 '19 at 13:13
0

There is a short way instead if you just want to capture number of visitors on your webapp. I created a collection called "Visits" in firestore and generated auto id inside which I added a field called "count". That's it! Now you just have to call this method in your first screen's init method :

updateCounter() async {
final cRef = FirebaseFirestore.instance.collection('VISITS');
await cRef
    .doc("mS9fCXjvkpREt8LvanSb") //Paste the id which was generated automatically
    .set({"count": FieldValue.increment(1)}, SetOptions(merge: true));

}

Deepanshu Chowdhary
  • 223
  • 2
  • 7