amp-analytics: gtag vendor config rewriter payload size limitation

[adekbadek]

What's the issue?

The config rewriter of the gtag vendor seems to have size limits.

How do we reproduce the issue?

1. Set up amp-analytics with gtag as the type (<amp-analytics type="gtag">)
2. Observe that a request is made to https://www.googletagmanager.com/gtag/amp, which is specified as the configRewriter here
3. In the triggers part of the configuration, insert enough triggers so that the payload to the above endpoint surpasses 10kB
4. Observe the request failing and and a "Error rewriting configuration" error thrown in the JS console

[micajuine-ho]

Hi @adekbadek , thank you for your bug report. Can you please attach an amp-analytics config so we can easily repro the issue?

[adekbadek]

Here it is - click to expand

{
  "optoutElementId": "__gaOptOutExtension",
  "vars": {
    "gtag_id": "UA-157804742-1",
    "config": {
      "UA-157804767-1": {
        "groups": "default",
        "linker": [],
        "send_page_view": false,
        "dimension2": "nosh",
        "dimension1": "John Doe",
        "dimension3": 1856,
        "dimension4": "2021-02-18 09:15"
      }
    }
  },
  "triggers": {
    "socialShareClickedFacebook": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "social share",
        "event_label": "facebook",
        "event_category": "NTG social",
        "non_interaction": false
      },
      "selector": "amp-social-share[type=\"facebook\"]"
    },
    "socialShareClickedTwitter": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "social share",
        "event_label": "twitter",
        "event_category": "NTG social",
        "non_interaction": false
      },
      "selector": "amp-social-share[type=\"twitter\"]"
    },
    "socialShareClickedWhatsApp": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "social share",
        "event_label": "whatsapp",
        "event_category": "NTG social",
        "non_interaction": false
      },
      "selector": "amp-social-share[type=\"whatsapp\"]"
    },
    "socialShareClickedLinkedIn": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "social share",
        "event_label": "linkedin",
        "event_category": "NTG social",
        "non_interaction": false
      },
      "selector": "amp-social-share[type=\"linkedin\"]"
    },
    "articleRead25": {
      "request": "event",
      "on": "scroll",
      "vars": {
        "event_name": "25%",
        "event_label": "Torquent imperdiet eget curabitur lacus sagittis lobortis dolor aptent elit parturient sociis",
        "event_category": "NTG article milestone",
        "non_interaction": true,
        "value": 25
      },
      "event_value": 25,
      "non_interaction": true,
      "scrollSpec": {
        "verticalBoundaries": [25]
      }
    },
    "articleRead50": {
      "request": "event",
      "on": "scroll",
      "vars": {
        "event_name": "50%",
        "event_label": "Torquent imperdiet eget curabitur lacus sagittis lobortis dolor aptent elit parturient sociis",
        "event_category": "NTG article milestone",
        "non_interaction": true,
        "value": 50
      },
      "event_value": 50,
      "non_interaction": true,
      "scrollSpec": {
        "verticalBoundaries": [50]
      }
    },
    "articleRead100": {
      "request": "event",
      "on": "scroll",
      "vars": {
        "event_name": "100%",
        "event_label": "Torquent imperdiet eget curabitur lacus sagittis lobortis dolor aptent elit parturient sociis",
        "event_category": "NTG article milestone",
        "non_interaction": true,
        "value": 100
      },
      "event_value": 100,
      "non_interaction": true,
      "scrollSpec": {
        "verticalBoundaries": [100]
      }
    },
    "5f8f1b05619f1": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Donate \u2013 masthead",
        "event_label": "",
        "event_category": "Masthead links",
        "non_interaction": true
      },
      "selector": "#menu-donate-header a",
      "non_interaction": true,
      "is_active": true
    },
    "60074abd82f47": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Click \u2013 related stories",
        "event_label": "",
        "event_category": "Content links",
        "non_interaction": true
      },
      "selector": ".jp-relatedposts-i2 a",
      "non_interaction": true,
      "is_active": true
    },
    "60074b9d765ae": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Click \u2013 recent stories",
        "event_label": "",
        "event_category": "Aside links",
        "non_interaction": true
      },
      "selector": ".widget_recent_entries a",
      "non_interaction": true,
      "is_active": true
    },
    "popupPageLoaded-389200": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: prompt four (389200)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1738404132",
      "non_interaction": true
    },
    "popupSeen-389200": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: prompt four (389200)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1738404132",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupPageLoaded-389199": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: Another prompt (389199)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox736669708",
      "non_interaction": true
    },
    "popupSeen-389199": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: Another prompt (389199)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox736669708",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupPageLoaded-389197": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: Some prompt (389197)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox746257882",
      "non_interaction": true
    },
    "popupSeen-389197": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: Some prompt (389197)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox746257882",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupPageLoaded-389194": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: Prompt new (389194)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox497576446",
      "non_interaction": true
    },
    "popupSeen-389194": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: Prompt new (389194)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox497576446",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupPageLoaded-388560": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: Netus accumsan mauris purus pulvinar (388560)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox334540556",
      "non_interaction": true
    },
    "popupSeen-388560": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: Netus accumsan mauris purus pulvinar (388560)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox334540556",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupPageLoaded-388548": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: CTA Donation short (388548)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1901518604",
      "non_interaction": true
    },
    "popupSeen-388548": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: CTA Donation short (388548)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1901518604",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupAnchorClicks-388548": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Link Click",
        "event_label": "Newspack Announcement: CTA Donation short (388548)",
        "event_category": "Newspack Announcement",
        "non_interaction": false
      },
      "selector": "#lightbox1901518604 a"
    },
    "popupPageLoaded-388543": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: CTA Newsletter from Social (388543)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox293657040",
      "non_interaction": true
    },
    "popupSeen-388543": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: CTA Newsletter from Social (388543)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox293657040",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupFormSubmitSuccess-388543": {
      "request": "event",
      "on": "amp-form-submit-success",
      "vars": {
        "event_name": "Form Submission",
        "event_label": "Newspack Announcement: CTA Newsletter from Social (388543)",
        "event_category": "Newspack Announcement",
        "non_interaction": false
      },
      "selector": "#lightbox293657040 form:not(.popup-action-form)"
    },
    "popupPageLoaded-388571": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: CTA Related Links Existing Users (388571)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1612456691",
      "non_interaction": true
    },
    "popupSeen-388571": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: CTA Related Links Existing Users (388571)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox1612456691",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupAnchorClicks-388571": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Link Click",
        "event_label": "Newspack Announcement: CTA Related Links Existing Users (388571)",
        "event_category": "Newspack Announcement",
        "non_interaction": false
      },
      "selector": "#lightbox1612456691 a"
    },
    "popupPageLoaded-388573": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: CTA Donation (388573)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox632323571",
      "non_interaction": true
    },
    "popupSeen-388573": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: CTA Donation (388573)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox632323571",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupAnchorClicks-388573": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Link Click",
        "event_label": "Newspack Announcement: CTA Donation (388573)",
        "event_category": "Newspack Announcement",
        "non_interaction": false
      },
      "selector": "#lightbox632323571 a"
    },
    "popupPageLoaded-388575": {
      "request": "event",
      "on": "ini-load",
      "vars": {
        "event_name": "Load",
        "event_label": "Newspack Announcement: CTA Netus accumsan mauris purus pulvinar, donate more (388575)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox108178534",
      "non_interaction": true
    },
    "popupSeen-388575": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "Seen",
        "event_label": "Newspack Announcement: CTA Netus accumsan mauris purus pulvinar, donate more (388575)",
        "event_category": "Newspack Announcement",
        "non_interaction": true
      },
      "selector": "#lightbox108178534",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "popupAnchorClicks-388575": {
      "request": "event",
      "on": "click",
      "vars": {
        "event_name": "Link Click",
        "event_label": "Newspack Announcement: CTA Netus accumsan mauris purus pulvinar, donate more (388575)",
        "event_category": "Newspack Announcement",
        "non_interaction": false
      },
      "selector": "#lightbox108178534 a"
    },
    "newsletterSignup-wp-block-jetpack-mailchimp-603d5fef095be": {
      "request": "event",
      "on": "amp-form-submit-success",
      "vars": {
        "event_name": "newsletter signup",
        "event_label": "success",
        "event_category": "NTG newsletter",
        "non_interaction": false
      },
      "selector": "#wp-block-jetpack-mailchimp-603d5fef095be form",
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    },
    "newsletterImpression-wp-block-jetpack-mailchimp-603d5fef095be": {
      "request": "event",
      "on": "visible",
      "vars": {
        "event_name": "newsletter modal impression 1",
        "event_label": "Torquent imperdiet eget curabitur lacus sagittis lobortis dolor aptent elit parturient sociis",
        "event_category": "NTG newsletter",
        "non_interaction": true
      },
      "selector": "#wp-block-jetpack-mailchimp-603d5fef095be",
      "non_interaction": true,
      "visibilitySpec": {
        "totalTimeMin": 500
      }
    }
  }
}
  

[micajuine-ho]

Is there a live website that is using this config?

[adekbadek]

Here's an example - if you inspect the call made to https://www.googletagmanager.com/gtag/amp?__amp_source_origin=https%3A%2F%2Fscientific-vole.jurassic.ninja, its payload is ~11kB and it fails.

[micajuine-ho]

Hi I am seeing that is a CORS error:

I believe this is fixable on your end.

[adekbadek]

Hi, the issue is not about this specific site (even though I don't see a CORS error in my testing, but a Error rewriting configuration). The issue is about the gtag vendor config rewriter request failing when the config is above certain size. You can see the same error here, for example. Please reopen the issue.

[micajuine-ho]

My apologies.

Can you screen shot & share the error? AFAIK we do not have size limit on the XHR request to pull in the gtag config rewriter. Additionally, I am still seeing the CORS error on the link above. Is there anything special about how you're viewing the page that would not cause a CORS error? A CORS error would also cause amp-analytics to not work.

[adekbadek]

Can you screen shot & share the error?

Sure, here is the console error:

Error rewriting configuration:  https://www.googletagmanager.com/gtag/amp Error: XHR Failed fetching (https://www.googletagmanager.com/...): Failed to fetch

Another example with a page making (and failing) a large request to https://www.googletagmanager.com/gtag/amp is https://washingtoncitypaper.com/article/511072/new-shaw-italian-restaurant-quattro-osteria-will-serve-fresh-pasta/ - can you see the error I've pasted above on this site?

[micajuine-ho]

What about this errors leads you to believe it's a size limitation?

[adekbadek]

When debugging this on a local instance, I did hard-code the configuration provided to amp-analytics. The request was failing as soon as the payload size surpassed 10kB.

[micajuine-ho]

When debugging this on a local instance, I did hard-code the configuration provided to amp-analytics. The request was failing as soon as the payload size surpassed 10kB.

Sorry, just trying to understand the problem a little more. What part of the config did you hard-code?

Then when you ran you page, the config rewriter failed due to payload size being over 10kb?

[adekbadek]

Sorry, just trying to understand the problem a little more. What part of the config did you hard-code?

No problem, I should have been clearer. The config has a triggers key, where GA custom events can be passed if we're dealing with GA as the analytics vendor. Where we've seen this error on live sites, the triggers key is a big chunk of the payload, since there are many custom events registered. In my local testing, I inflated the config size by adding more custom events, as well as setting long strings for event category, action, or label.

Then when you ran you page, the config rewriter failed due to payload size being over 10kb?

The error message just says Error rewriting configuration, but the 10kB threshold is the only factor I've observed that causes this error.

[micajuine-ho]

Hi, after some more debugging, it seems that the 10KB limit is due to the GTAG server rejecting a payload over 10KB. This is not AMPs doing.

Some solutions: 1.) We can reach out to GTAG and see if they can up their limit 2.) We can try to reduce the size of your config 3.) Build a new mechanism to batch the sends of configRewriter

Of these solutions 2 is the best IMO, since smaller config means less HTML + JS to parse = faster page. Have you seen https://github.com/ampproject/amphtml/issues/26823? It can possibly help to reduce the size of your config.

[adekbadek]

Hi, thanks for the update. We've reduced the size of the config by other means, but still it might get close to 10kB in some cases.

#26823 would not help in our case, since the events triggered on visibility all have different configuration (event labels, actions).

How would we go about solution 1.?

[micajuine-ho]

I can reach out to the GTAG team, but I do not have any agency besides this as we do not own their codebase.

I'd be interested in diving into why the config is still 10kB. Can you give me an overview of what your attempting to track with your analytics config?

[adekbadek]

The config is inflated mainly by custom events (see an example in an earlier comment). A WordPress plugin we develop, Newspack Campaigns, sends custom events to GA on related events - when a user sees a prompt (aka popup), click a link, etc. With enough prompts on a page, the config might get large. On top of that, we're sending events related to News Tagging Guide - like an article read milestone or a social share click.

[adamsilverstein]

@adekbadek I believe you mentioned that to same set of events do not cause a failure even when over 10k in a non-AMP context. Is that correct? and if so, what endpoint do you see the events sent to? I'm wondering if it would be possible to switch the AMP approach to using a different endpoint.

[micajuine-ho]

The endpoint that is failing is the configRewriter https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/0.1/vendors/gtag.json#L3

This endpoint exists in AMP to fetch a dynamic amp analytics config based upon the publishers inline config. Does this exist in non AMP world?

[adekbadek]

In non-AMP context there is no request to a config rewriter - it's an amp-analytics specific feature. So in non-AMP there is no additional request.

[micajuine-ho]

@adamsilverstein Do you know who we can loop in from the gtag team to see if they have experience handling this problem of large configs being sent to their configRewriter?

[buley]

Any limitations really should be documented, please.