Google Tag Manager 403's every request even if CORS mapping is defined

5.4k views Asked by At

when I moved to AMP, the Google Tag Manager stopped to working. The problem occurs every time when I open my AMPed page, I can see some errors in browser console, e.g.

First error:

https://www.googletagmanager.com/amp.json?id=MY_GTM_TAG&gtm.url=MY_HTTP_URL

(403)

Second error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' 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.

In my class that extends WebMvcConfigurerAdapter I overwritten the method addCorsMappings like this:

   @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
       .allowedOrigins("*")
       .allowedHeaders("*")
       .allowCredentials(true);
    };

But it still doesn't work (this method is executed on startup, I checked it). Do you have any ideas / tips why?

EDIT 1 (22.12.2016):

Q: How are you loading tag manager? Are you using the AMP version of the script? (@Jim Jeffries)

A: Yes, in <head> I included the following piece of code:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

and in <body> there is:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=${googleTagId}&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
2

There are 2 answers

0
abielita On BEST ANSWER

Based from this thread, maybe you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

*When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:*

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Also based from this forum, the app must authenticate as a full admin and POST the desired CORS configuration to /rest/system/config.

0
Francisco Gonzalez Rull On

I was having the same issue and it turns out you can't use your old GTM "Web" container for this so you'll have to create a specific AMP Container.

As per Google's instructions found here:

Create an AMP container

Tag Manager features an AMP container type. Create a new AMP container for your project:

  1. On the Accounts screen, click More Actions (More) for the account you'd like to use. Select Create Container.
  2. Name the container. Use a descriptive name, e.g. "example.com - news - AMP".
  3. Under "Where to Use Container", select AMP.
  4. Click "Create".