Amphtml: AMP-Analytics: Errors with Google Tag-Manager

[lintal]

What's the issue?

A change made in the following PR is resulting in the __amp_source_origin to be excluded from requests to an amp-analytics config file.
https://github.com/ampproject/amphtml/pull/12787

Google Tag Manager appears to omit all CORS headers unless this GET parameter is included.
Because Access-Control-Allow-Origin: * is therefore not included by GTM, the browser throws the following error:

Failed to load https://www.googletagmanager.com/amp.json?id=GTM-KCTM85F&gtm.url=https%3A%2F%2Fwww.simgolf.dk%2F: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.simgolf.dk' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How do we reproduce the issue?

One example provided in the #general Slack channel was for https://www.simgolf.dk/

What browsers are affected?

I am assuming all.

Which AMP version is affected?

The latest build: https://github.com/ampproject/amphtml/releases/tag/1516396600278

[lintal]

The work-around I can see for this is to manually append the __amp_source_origin parameter to the end of the amp-analytics config URL.
However is there a better way?

[cramforce]

CC @newmuis for prod patch

[SimonHogstromRonbol]

i want to add that the workaround that @lintal suggest makes tagmanager work, but doing that gives me the following amp validation error:

https://www.simgolf.dk/:1:42210 The attribute 'config' in tag 'amp-analytics' is set to the invalid value 'https://www.googletagmanager.com/amp.json?id=GTM-KCTM85F&gtm.url=SOURCE_URL&__amp_source_origin=https%3A%2F%2Fwww.simgolf.dk'. (see https://www.ampproject.org/docs/reference/components/amp-analytics)

[cramforce]

Yes, the work-around doesn't work. The production release is being rolled back and things should return to normal soon.

[newmuis]

Versioned prod has finished rolling out 1516337355291. Still waiting on unversioned prod.

[newmuis]

Unversioned prod has finished rolling out 1516337355291 as well.

[kristiandavid]

@newmuis thanks! was having the same issue as well. Thankfully I found this ticket! Thanks for creating the ticket @lintal

[ilnarb]

In our analytics system, we have the same problems: browsers don't load config coz CORS headers are wrong. Workaround made using "Origin" header line (set AMP CORS headers using Origin instead of __amp_source_origin) does not work for Google AMP Cache requests.

[zhouyx]

Confirmed that the fix is in prod and canary.

[sryze]

I'm experiencing the same issue, even though it was said that the fix has been released. Do I need to change something in Google Tag Manager configuration?

Failed to load https://www.googletagmanager.com/amp.json?id=MY_ID&gtm.url=https%3A%2…mysite.com&__amp_source_origin=https%3A%2F%2Fwww.mysite.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.mysite.com' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[zhouyx]

@sryze I checked with the example provided in slack channel

One example provided in the #general Slack channel was for https://www.simgolf.dk/

And it works. Could you please provide me your example page to further test with. Thanks.

[sryze]

@zhouyx See this page for example.

[zhouyx]

Hi @sryze I ran your page and was able to see the __amp_source_origin setted correctly.
I then ran your page locally but replaced the GTM id with another one. Then I was able to get the GTM response correctly. Could you please double check with GTM that you have configured it correctly. Thanks a lot! Please let us know if it still doesn't work.

[yajiv185]

I'm experiencing the same issue, even though it was said that the fix has been released. Do I need to change something in Google Tag Manager configuration?

Failed to load https://www.googletagmanager.com/amp.json?id=GTM-TQFM9MR&gtm.url=https%3A%2F%2Fstaging.carwale.com%3A9012%2Famp%2Fused%2Fcars-in-pune%2F&__amp_source_origin=https%3A%2F%2Fstaging.carwale.com%3A9012: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://staging.carwale.com:9012' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

You can check it for following url.
https://staging.carwale.com:9012/amp/used/cars-in-pune/#development=1

[lannka]

@yajiv185 I got a 503 on the above link.

/cc @zhouyx

[yajiv185]

@lannka Actually, I have given a link of our testing environment, So it will be not available between 12:00 am-IST(6:30 PM UTC) to 9:00 am- IST(3:30 AM UTC). So if possible please don't check during this time.

Or you can check here(It is simple page which with no data, only amp-analytics code for gtm)

[yajiv185]

Any Update? Due to this I was stuck and can not able to use gtm in my page

[david-aa]

Any Update? Due to this I was stuck and can not able to use gtm in my page

Maybe it's a silly question but, have you published your GTM container?

[mrienstra]

I experienced this issue as well (same error message). I was attempting to verify proper AMP GTM setup before adding anything (tags / triggers / variables) to the new AMP GTM container, which perhaps effectively means the container had not been published.

It was resolved by publishing changes. After adding the first tag & trigger, I noticed the error disappeared when I turned on preview mode. I then published the changes, and have yet to see the error again.

@david-aa: Thanks for the clue!

[MrCsabaToth]

It's 2020 May 27th, and I viewing @sryze test page. It's still erroring out. It uses the code what GTAG site suggests. I'm experiencing the problem with my site as well. How to overcome this?

[zhouyx]

Hello @MrCsabaToth,

As you described https://codepen.io/yajiv185/pen/ePWozd still errors out. I'm able to verify. But the error is different from the reported error here, as you can see the outgoing request has the
__amp_source_origin param set correctly.

I experienced this issue as well (same error message). I was attempting to verify proper AMP GTM setup before adding anything (tags / triggers / variables) to the new AMP GTM container, which perhaps effectively means the container had not been published.
It was resolved by publishing changes. After adding the first tag & trigger, I noticed the error disappeared when I turned on preview mode. I then published the changes, and have yet to see the error again.

Have you tried publishing your changes to resolve the issue on your site as @mrienstra suggested? Thanks

[MrCsabaToth]

@zhouyx I was looking at https://www.upnest.com/amp-gtm-test.html The quoted error sound like exactly the same as the Issue opener, except with different URLs because they are not the same site. Even on the little screenshot you just included. A slight difference is "Access to fetch" vs "Failed to Load", but semantically they seem to be the same.

[zhouyx]

From the discussion above, I believe the cause to the issue above is that the container hasn't been published yet. So the required header isn't added by the server. The testing page probably hadn't been updated for a while.
@mrienstra Are you seeing the same error with your own site after publishing changes.

cc @zikas to comment on the GTM error message.

[zikas]

The container that is being loaded on the test page is not a valid GTM AMP container, so server replies with 403 thus does not send valid cors headers.
Please use valid GTM AMP container ID.

[MrCsabaToth]

@zikas https://www.upnest.com/amp-gtm-test.html passes validation for me. Not my page though.

[zhouyx]

@MrCsabaToth if you're referring to AMP validator. Then it is completely different concept.
The test page you're referring is a valid AMP page, but using an invalid GTM container.

[zikas]

Simple check would be just to click on the link from the error message.
https://www.googletagmanager.com/amp.json?id=GTM-MSRHHLG&gtm.url=https%3A%2F%2Fwww.upnest.com%2Famp-gtm-test.html
returns 403 error page but should give you a valid json.

For example look at the response for the valid GTM AMP container: https://www.googletagmanager.com/amp.json?id=GTM-WC8J58F

[MrCsabaToth]

@zikas Gotcha. I thought the 403 was because I was not making the proper type of call to the endpoint, although I tried REST POST and GET with REST client too. So I have also had a tag ID defined for my site but had the same problem: https://www.googletagmanager.com/amp.json?id=GTM-NPS2Q4K

After you pointed this out I realized that the "Container" (the GTAG container???) was not published, therefore the endoint was not alive either. If for example someone has a Tag ID (like GTM-NPS2Q4K) but doesn't have a tag defined in it, then the container cannot even be in published state. I'm a developer and I'm far from being an Analytics or GTAG guru, I didn't know this. So after publishing the container the endpoint now answers.

I have a strong gut feeling that others might have the same scenario as me! Thanks @zikas

[adekbadek]

Had the same issue when loading a remote configuration with amp-analytics' config prop. Turned out the configuration was invalid, which manifested itself as the CORS error. Once the remote configuration was valid, the CORS issue was no more.

[MrCsabaToth]

Had the same issue when loading a remote configuration with amp-analytics' config prop. Turned out the configuration was invalid, which manifested itself as the CORS error. Once the remote configuration was valid, the CORS issue was no more.

Can you tell us more detail about what was invalid in the configuration?

[adekbadek]

No triggers provided if I remember correctly, just a mistake on my part.