ampproject / ampproject/amphtml

amp-analytics: iframe transport not choosen when triggered by an event (e.g. via amp-carousel)

Open
#37,968 2 comments 0 reactions 0 assignees View on GitHub
Component: amp-analytics P3: When Possible Stale Type: Bug WG: analytics WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

If a `` element is implemented together with `` element and the provider uses an `iframe` as transport type, `image` is used as transport type instead when corresponding events are raised from the `` . This then results in an expected CORB error because the requested content type does not match the content type of the response. Our expectation here is that the vendor configuration and the requests and transport types specified apply.

According to the documentation, there is a fixed sequence for the transport methods used:

> If more than one of the above transport methods are enabled, the precedence is iframe > beacon > xhrpost > image. Only one transport method will be used, and it will be the highest precedence one that is permitted and available. If the client's user agent does not support a method, the next highest precedence method enabled will be used. By default, all four methods above are enabled.

From our point of view, AMP deviates from the documented procedure here.

### Reproduction Steps

Checkout [AMP Playground](https://playground.amp.dev/#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoSBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8dGl0bGU+YW1wLWNhcm91c2VsPC90aXRsZT4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDwhLS0gIyMgU2V0dXAgLS0+CiAgPCEtLSBJbXBvcnQgdGhlIGNhcm91c2VsIGNvbXBvbmVudCBpbiB0aGUgaGVhZGVyLiAtLT4KICA8c2NyaXB0IGFzeW5jIGN1c3RvbS1lbGVtZW50PSJhbXAtY2Fyb3VzZWwiIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAvYW1wLWNhcm91c2VsLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWFuYWx5dGljcyIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtYW5hbHl0aWNzLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9Imh0dHBzOi8vYW1wLmRldi9kb2N1bWVudGF0aW9uL2V4YW1wbGVzL2NvbXBvbmVudHMvYW1wLWNhcm91c2VsL2luZGV4Lmh0bWwiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiPgogIDxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tb3otYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1zLWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoO2FuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RofUAtd2Via2l0LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1vei1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tcy1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1vLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1Aa2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fTwvc3R5bGU+PG5vc2NyaXB0PjxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjpub25lOy1tb3otYW5pbWF0aW9uOm5vbmU7LW1zLWFuaW1hdGlvbjpub25lO2FuaW1hdGlvbjpub25lfTwvc3R5bGU+PC9ub3NjcmlwdD4KICA8c3R5bGUgYW1wLWN1c3RvbT4KICAgIC5ibHVlLWJveCwgLnJlZC1ib3gsIC5ncmVlbi1ib3ggewogICAgICB3aWR0aDogMTAwJTsKICAgICAgaGVpZ2h0OiAyODBweDsKICAgIH0KICAgIC5ibHVlLWJveCB7CiAgICAgIGJhY2tncm91bmQ6IGJsdWU7CiAgICAgIGNvbG9yOiAjZmZmOwogICAgfQogICAgLmdyZWVuLWJveCB7CiAgICAgIGJhY2tncm91bmQ6IGdyZWVuOwogICAgICBjb2xvcjogI2ZmZjsKICAgIH0KICAgIC5yZWQtYm94IHsKICAgICAgYmFja2dyb3VuZDogcmVkOwogICAgICBjb2xvcjogIzExMTsKICAgIH0KICAgICNjdXN0b20tYnV0dG9uIC5hbXAtY2Fyb3VzZWwtYnV0dG9uLXByZXYgewogICAgICBsZWZ0OiA1JTsKICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCdodHRwczovL2FtcC5kZXYvc3RhdGljL3NhbXBsZXMvaW1nL2Nhcm91c2VsLWFycm93LWxlZnQucG5nJyk7CiAgICB9CiAgICAjY3VzdG9tLWJ1dHRvbiAuYW1wLWNhcm91c2VsLWJ1dHRvbi1uZXh0IHsKICAgICAgcmlnaHQ6IDUlOwogICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2h0dHBzOi8vYW1wLmRldi9zdGF0aWMvc2FtcGxlcy9pbWcvY2Fyb3VzZWwtYXJyb3ctcmlnaHQucG5nJyk7CiAgICB9CiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8YW1wLWFuYWx5dGljcyB0eXBlPSJpbmZvbmxpbmVfYmFzZSI+CiAgICA8c2NyaXB0IHR5cGU9ImFwcGxpY2F0aW9uL2pzb24iPgogICAgICB7CiAgICAgICAgInZhcnMiOiB7CiAgICAgICAgICAic3QiOiAiaW5mb25saW4iLAogICAgICAgICAgImNwIjogImFtcF9jYXJvdXNlbF90ZXN0IiwKICAgICAgICAgICJkbiI6ICJkYXRhLWQ1YzczM2FjY2MuaW5mb25saW5lLmRlIgogICAgICAgIH0sCiAgICAgICAgInJlcXVlc3RzIjogewogICAgICAgICAgInVybCI6ICJodHRwczovL2RhdGEtZDVjNzMzYWNjYy5pbmZvbmxpbmUuZGUvaW9tYi9sYXRlc3QvaHRtbC9hbXAuaHRtbCIKICAgICAgICB9LAogICAgICAgICJ0cmlnZ2VycyI6IHsKICAgICAgICAgICJhbXBDYXJvdXNlbE5leHQiOiB7CiAgICAgICAgICAgICJvbiI6ICJhbXAtY2Fyb3VzZWwtbmV4dCIsCiAgICAgICAgICAgICJyZXF1ZXN0IjogInBhZ2V2aWV3IgogICAgICAgICAgfSwKICAgICAgICAgICJhbXBDYXJvdXNlbFByZXYiOiB7CiAgICAgICAgICAgICJvbiI6ICJhbXAtY2Fyb3VzZWwtcHJldiIsCiAgICAgICAgICAgICJyZXF1ZXN0IjogInBhZ2V2aWV3IgogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfQogICAgPC9zY3JpcHQ+CiAgPC9hbXAtYW5hbHl0aWNzPgogIDwhLS0gIyMgQmFzaWMgVXNhZ2UgLS0+CiAgPCEtLSBVc2UgYHR5cGU9ImNhcm91c2VsImAgdG8gZGlzcGxheSBhIGxpc3Qgb2YgaW1hZ2VzIGFzIGEgY29udGludW91cyBzdHJpcC4gLS0+CiAgPGFtcC1jYXJvdXNlbCBoZWlnaHQ9IjMwMCIgbGF5b3V0PSJmaXhlZC1oZWlnaHQiIHR5cGU9InNsaWRlcyIgcm9sZT0icmVnaW9uIiBhcmlhLWxhYmVsPSJCYXNpYyB1c2FnZSBjYXJvdXNlbCI+CiAgICA8YW1wLWltZyBzcmM9Imh0dHBzOi8vcHJldmlldy5hbXAuZGV2L3N0YXRpYy9zYW1wbGVzL2ltZy9pbWFnZTEuanBnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgYWx0PSJhIHNhbXBsZSBpbWFnZSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgc3JjPSJodHRwczovL3ByZXZpZXcuYW1wLmRldi9zdGF0aWMvc2FtcGxlcy9pbWcvaW1hZ2UyLmpwZyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGFsdD0iYW5vdGhlciBzYW1wbGUgaW1hZ2UiPjwvYW1wLWltZz4KICAgIDxhbXAtaW1nIHNyYz0iaHR0cHM6Ly9wcmV2aWV3LmFtcC5kZXYvc3RhdGljL3NhbXBsZXMvaW1nL2ltYWdlMy5qcGciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIiBhbHQ9ImFuZCBhbm90aGVyIHNhbXBsZSBpbWFnZSI+PC9hbXAtaW1nPgogIDwvYW1wLWNhcm91c2VsPgogIDwhLS0gQSBnb29kIHVzZSBjYXNlIGZvciBgYW1wLWNhcm91c2VsYCBhcmUgaW1hZ2UgZ2FsbGVyaWVzLCBbaGVyZV0oL2RvY3VtZW50YXRpb24vZXhhbXBsZXMvbXVsdGltZWRpYS1hbmltYXRpb25zL2ltYWdlX2dhbGxlcmllc193aXRoX2FtcC1jYXJvdXNlbC8pIGFyZSBzb21lIGV4YW1wbGVzLiAtLT4KPC9ib2R5Pgo8L2h0bWw+), open browser console and slide through carousel.

### Relevant Logs

```shell
​ Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".

​ See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
​ Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
​ See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
playground.amp.dev/:1 Autofocus processing was blocked because a document already has a focused element.
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
​ See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel#development=1
VM30 validator_wasm.js:1727 See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F%3Furl%3Dhttps%253A%252F%252Fpreview.amp.dev%252Fdocumentation%252Fexamples%252Fcomponents%252Famp-carousel
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel#development=1
validator_wasm.js:1727 See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F%3Furl%3Dhttps%253A%252F%252Fpreview.amp.dev%252Fdocumentation%252Fexamples%252Fcomponents%252Famp-carousel
log.js:232 [amp-analytics/transport] Response unparseable or failed to send image request https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview
i.qt @ log.js:232
i.warn @ log.js:261
(anonym) @ transport.js:256
Promise.catch (async)
t.sendRequestUsingImage @ transport.js:254
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
Cross-Origin Read Blocking (CORB) hat die ursprungsübergreifende Antwort https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview mit dem MIME-Typ text/html blockiert. Weitere Informationen finden Sie unter https://www.chromestatus.com/feature/5629709824032768.
Image (async)
me @ pixel.js:65
(anonym) @ pixel.js:23
t.sendRequestUsingImage @ transport.js:249
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
Cross-Origin Read Blocking (CORB) hat die ursprungsübergreifende Antwort https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview mit dem MIME-Typ text/html blockiert. Weitere Informationen finden Sie unter https://www.chromestatus.com/feature/5629709824032768.
Image (async)
me @ pixel.js:65
(anonym) @ pixel.js:23
t.sendRequestUsingImage @ transport.js:249
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
log.js:232 [amp-analytics/transport] Response unparseable or failed to send image request https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview
i.qt @ log.js:232
i.warn @ log.js:261
(anonym) @ transport.js:256
Promise.catch (async)
t.sendRequestUsingImage @ transport.js:254
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
```

### Browser(s) Affected

Chrome

### OS(s) Affected

MacOS

### Device(s) Affected

MacBook

### AMP Version Affected

2203101844000

Contributor guide

Open the contributing guide

Research direction

Reproduce the AMP Playground example by triggering amp-carousel events and inspect the transport.js, requests.js, and amp-analytics.js stack entries shown in the logs. Trace why the configured iframe transport is replaced by image for these events; done means the documented transport precedence is honored and the CORB error no longer occurs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.