Angular 504 from service worker with google analytics/adsense

Viewed 371

I have set up service worker for my existing angular application via the angular cli command ng add @angular/pwa.

Everything works as excepted, but unfortunately I cannot use google analyitcs/adsense yet. When a request is made for https://pagead2.googlesyndication.com/pagead/ or https://www.googletagmanager.com/gtag/ (haven't copied complete url), the status code 504 Gateway Timeout (from service worker) is returned.

(for adsense I use https://github.com/scttcper/ng2-adsense)

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/"/>
    <title>Home</title>
    <meta charset="utf-8"/>
    <meta name="theme-color" content="#ffffff">
    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="manifest" href="manifest.webmanifest">
    <!-- Google Analytics -->
    <script defer src="https://www.googletagmanager.com/gtag/js?id=G-YNGTS7N58K?ngsw-bypass=true"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-YNGTS7N58K");
    </script>
    <!--Google AdSense-->
    <script defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?ngsw-bypass=true"></script>
  </head>

  <body>
    <app-root></app-root>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
  </body>
</html>

Because I thought the error had to do with the request going from the service worker proxy, I added the ngsw-bypass query parameter to the script links as suggesteded here https://angular.io/guide/service-worker-devops#bypassing-the-service-worker.

When I inspect the network tab i can see that both scripts for adsense and analytics are successfully downloaded and cached. But the requests made by the scripts are failing. Can I configure the service worker proxy to add the ngsw-bypass query paramter automatically since I cannot edit those scripts or is my itention why this fails wrong?

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}
1 Answers

For anyone also encountering this problem:

I've used the guide here LINK (more specifically the last step of the guide, that is "Environment Specific Setup (...)), and tested whether it works without the "ngsw-bypass" workaround. Everything seems to work fine now (in an Angular 13 app).

Note: since we're adding the GA script tag dynamically, there's no need for it in the <head> tag, although we still do need the slightly modified <script> with gtag function in it (but without the gtag("config", "GA-ID");).

We're adding that gtag config in the app.component.ts file as well as the tag manager config (to opt out from sending "page_view").

Also don't forget about the declare let gtag: Function; statement above AppComponent declaration.

BTW. I'm using Brave browser (that has built-in anti trackers) and uBlock Origin adblocker, which were blocking the tracking POST requests (so GA couldn't report any activity). I've had to disable them.

Related