Amphtml: amp-analytics skipped initialization leading no events are sent.

[miaosisi]

What's the issue?

amp-analytics skipped initialization leading to no events are sent.

How do we reproduce the issue?

Link: https://stageapi.sidechef.com/recipes/7633/

1. Open an incognito chrome window, also open chrome dev tools, click on the 'Network' panel.
2. Open the above link.
3. Try to scroll to the middle of the document as soon as possible. In our case, we scroll to the 'SAVE RECIPE' in the side bar.
4. Click on the 'SAVE RECIPE' button, will not find GA events sent. Those requests are like 'collect?v=1...' . You will also not be able to find the page view request.

Normal behavior steps that will send GA events correctly:

1. Open an incognito chrome window, also open chrome dev tools, click on the 'Network' panel.
2. Open the above link.
3. Stay for 2~3 seconds, after hero image loaded completely.
4. Scroll to the 'SAVE RECIPE' in the side bar.
5. Click on the 'SAVE RECIPE' button, will see the requests like 'collect?v=1...'. Will also find the page view request.

I checked the difference between two situations. I think the key issue is in the error case, the 'gtag.json' is not loaded.
Another way to reproduce this issue is like this:

1. Open an incognito chrome window, also open chrome dev tools, click on the 'Network' panel.
2. Open the above link.
3. Scroll to the 'SAVE RECIPE' in the side bar.
4. Clear the logs in the chrome dev tools
5. Refresh the page.
6. Will see the page stays in the middle. The page will not scroll to top thus you can not find the 'gtag.json' is loaded.

So without the 'gtag.json' file loaded, no events will be sent to GA. I looked at the source code of amp-analytics v0.1, I think I might found something related.
In the file https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/0.1/amp-analytics.js, from line 215 to line 235, line 233 is to load the vendor config, and I think this will load the 'gtag.json' file. Maybe it's the line 216 '.whenFirstVisible()' has something wrong.

Because in the above reproduce steps, after you have reproduced the issue, if you slowly scroll to top, you will find the 'gtag.json' will be triggered to load at some point.

What browsers are affected?

Chrome

Which AMP version is affected?

amp/v0/
amp-analytics 0.1

[miaosisi]

I recorded a video, here is the video link https://d1chloy9gc82l9.cloudfront.net/amp-analytics-issue-reproduce.mov

[micajuine-ho]

@miaosisi Are you still experiencing this issue? I am unable to repro this error currently.

[miaosisi]

@miaosisi Are you still experiencing this issue? I am unable to repro this error currently.

@micajuine-ho Yes, just tried this morning, easily reproduced. Just try in incognito window, open network panel in inspector, scroll to the middle of the page as soon as possible. You will find gtag.json is not loaded. But if you scroll slowly to top, you will see gtag.json is triggered to load. If you need video, I can record another video for you. It's showing the same result as the previous video link.

[micajuine-ho]

I believe the cause of this is due to the intersect-resources experiment; when I test locally and turn off the experiment, this behavior vanishes.

/cc @jridgewell, Any ideas why this might be the case?

[jridgewell]

@micajuine-ho I'm unable to get this to happen. gtag.json always loads very quickly for me, regardless of my scroll position

[micajuine-ho]

@jridgewell Have you tried in incognito mode? This seems to have an effect on reproducing this behavior.

[jridgewell]

Yes. Maybe we can screen share a bit later

[miaosisi]

@micajuine-ho @jridgewell Maybe this is kind related to internet. I guess this is because it's a async javascript, so it takes some time to load and execute, if scroll to middle happen before the execution, it might lead the issue. Cause not in incognito mode, with browser local cache, the chance for this issue to happen is lower than in incognito window since there is no network request from remote CDN. However in our scenario, most of the users come from search engine, they are very likely to not have local cache for amp js files, according to our data analysis, about 20%~30% users are missing events.

[jridgewell]

We were able to diagnose this a bit, but I'm still unsure why it's so intermittent. I can't get it to happen at all, but @micajuine-ho did. He's working on a fix.

[miaosisi]

@jridgewell @micajuine-ho Thanks for your help. Let me know when there is any progress.

[micajuine-ho]

@miaosisi When did you first notice this behavior?

[miaosisi]

@micajuine-ho In the middle of September, our data analyst find that the events number and the actual number(server logs) not matching. I looked into this problem and reproduced this issue.