CODEWITHSUNDEEP
javascriptreactjsmixpanel
dev
dev

Reputation: 53

How to prevent mixpanel page-view event from being counted twice after clicking on popup dialog button

I am integrating Mixpanel for a React web app. When the user logs in and views their profile, it tracks a Mixpanel event, "viewed-own-profile", since the user has viewing their profile page.

The user can then click on other buttons on their profile page such as an "add folder" button which opens a popup dialog. When the user clicks the "create" button in the popup dialog, it tracks a Mixpanel event, "click-add-folder" and closes the popup dialog. However, now that the popup has disappeared and the user sees their own profile page again, it tracks the Mixpanel event, "viewed-own-profile" again.

Is there some easy way to ensure that the Mixpanel event is only tracked when the user navigates to the profile page and it is not tracked when popups/components are closed?

I considered adding a lastEventTracked variable where I only track "viewed-own-profile" if the last event tracked was not "click-add-folder" and all the other popup/button click events on the user profile. However, I'm wondering if that is too verbose/unnecessary as I would need to update "lastEventTracked" in every single Mixpanel event I track.

Right now, I have created a mixpanel.js file shown below. In each file where I track Mixpanel events, I do mixpanelService = new MixpanelService() and then call the corresponding tracking function.

import mixpanel from 'mixpanel-browser';
mixpanel.init('api_key', {debug: true, ignore_dnt:true,}); 

let userNotIdentified = true;
let lastEventTracked = "";

export class MixpanelService {
  _identifyUserAndTrackSignIn(username, email) {
    mixpanel.identify(email);
    mixpanel.track("return-signin");
    mixpanel.people.set({
      '$name': username,
      '$email': email
    });
    userNotIdentified = false;
  };

  // ...many other events above
  viewOwnProfile(username, email) {
    if (userNotIdentified) {
      this._identifyUserAndTrackSignIn(username, email);
    }
    mixpanel.track("view-own-profile");
  };
  
  clickAddFolder(username, email) {
    if (userNotIdentified) {
      this._identifyUserAndTrackSignIn(username, email);
    }
    mixpanel.track("click-add-folder");
  };

  //... many other events below
};

Upvotes: 2

Views: 1841

Answers (1)

Damon Guzman
Damon Guzman

Reputation: 41

This is my first answer on StackOverflow and I've only been coding for 4 months, so please take my answer with a grain of salt.

I'm only familiar with functional components but my initial thinking is to use the "useEffect" hook that only runs when the page is initially rendered. For a functional component that would like something like:

const isFirstRender = useRef(true)


useEffect(() => {
 if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
   // enter tracking code here

}, []
)

For the "useEffect" hook you can enter a state variable in between the "[" and "]" and the "useEffect" hook will rerun the function when the state changes. I'm pretty sure that Class Components have a "hookless" way of implementing "useEffect" but I am unsure of how.

I doubt this answer is very helpful but I really hope it is! First answer on StackOverflow babyyy! Let's gooo!

Upvotes: 4

Related Questions