googleanalytics / autotrack

Automatic and enhanced Google Analytics tracking for common user interactions on the web.
Other
4.93k stars 563 forks source link

Mobile Event Tracking, Taps Aren't Consistently Logging #196

Open jonathanrbowman opened 7 years ago

jonathanrbowman commented 7 years ago

I'm looking at real-time events, in Google Analytics, and events fired from clicking on my desktop get logged correctly 100% of the time. On an iPhone, running Safari under iOS 10.3.3, only about a third of the events seem to get logged.

I didn't see information about mobile support on your readme for event tracking, but I thought it used to work. Technically, it still does work sometimes. Is there a configuration I need to change to make it more mobile-friendly, or is autotrack.js solid on the mobile front and I need to investigate other things within our web app to try and find a gremlin there?

To clarify: I'm testing the same link each time, by tapping on it, seeing if it logged after 10-20 seconds, then going back and tapping the same link again. I can do this 10 times and see maybe 3 or so of the events actually log, on my phone. On desktop, clicking with a mouse, they get logged 100% of the time.

philipwalton commented 7 years ago

Unfortunately, it's hard to answer this question without knowing more about what's not working. At a high level, there's no limitation in autotrack that would make it not work well on mobile, and I've also heard no reports (before this one) of mobile events missing, so I suspect what's happening is a combination of many things.

Do you have an example I can look at somewhere online where you can see the failure? And actually what would be even more helpful is if you had a reduced test case, so we could identify whether the issue is 1) a bug in autotrack, 2) an issue with your code, or perhaps 3) some sort of incompatibility with the two together.

philipwalton commented 7 years ago

To address your update:

To clarify: I'm testing the same link each time, by tapping on it, seeing if it logged after 10-20 seconds, then going back and tapping the same link again. I can do this 10 times and see maybe 3 or so of the events actually log, on my phone. On desktop, clicking with a mouse, they get logged 100% of the time.

Can you also post the code you're using to do the event tracking?

jonathanrbowman commented 7 years ago

Hey, thanks for getting back to me on this!

A reduced test case is definitely a good way to go, and something I can set up. The current culprit is a Rails app (we're not using turbolinks), but even though it's been pushed to production we haven't announced it yet. So, I need permission before I can actually post a link, but I will get back to you on that.

The code is pretty straightforward for it, I think:

I've got the tracking info in my head tag, where I init analytics and add requires for autotrack extensions:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-our-id', 'auto');

  // autotrack js extensions
  ga('require', 'eventTracker');
  ga('require', 'cleanUrlTracker', {
    trailingSlash: 'remove'
  });

  // prevent google analytics from logging any events on localhost and qa
  if (location.hostname == 'localhost' || location.hostname == 'qa.oursite.com') {
    ga('set', 'sendHitTask', null);
  }

  ga('send', 'pageview');

Autotrack.js is included afterwards, before the closing of the body tag.

Then, on our links, we've just got this inline with the tag:

ga-on="click" ga-event-category="Category Text" ga-event-action="Action Text" ga-event-label="Label Text"

It may just be coincidence, but adding target="_blank" seems to make it work more reliably? Although, I haven't tested that in production yet.

philipwalton commented 7 years ago

It may just be coincidence, but adding target="_blank" seems to make it work more reliably? Although, I haven't tested that in production yet.

Hmm, that's interesting since links are handled differently in Safari in the case of non-target-blank links (since Safari doesn't support navigator.sendBeacon). Maybe there are some mobile-specific issues there.

I can look at that.

jonathanrbowman commented 7 years ago

I didn't know anything about that...something interesting to read up on, thanks!

The target="_blank" was just me swinging wild to try and do something to make an impact, one way or another. I'll try it out in the chrome browser, on my iPhone, and see if the behavior is different.

philipwalton commented 7 years ago

I'll try it out in the chrome browser, on my iPhone, and see if the behavior is different.

That won't change anything. Apple doesn't let any other browsers run on iOS, so Chrome on iPhone uses the Safari rendering engine (Webkit) under the hood. The behavior should be the same.

jonathanrbowman commented 7 years ago

Ah, bummer but good to know. Thanks, and I'll still try and create a tiny test case using the same tracking code, version of autotrack, etc and see if I can get different results.