Merge pull request #4579 from rbideau/4576-google-analytics

Add google analytics scripts in template for standalone app
2021-02-22 16:17:30 +01:00
parent bde37d41da 72722c1f6c
commit bba5660b44
7 changed files with 79 additions and 12 deletions
@@ -0,0 +1,29 @@
+---
+'@backstage/create-app': patch
+---
+
+Add the google analytics scripts in the `index.html` template for new applications.
+
+To apply this change to an existing application, change the following in `packages\app\public\index.html`:
+
+```diff
+    <title><%= app.title %></title>
+
+    <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId
+    === 'string') { %>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
+    </script>
+    <% } %>
+  </head>
+```
@@ -204,6 +204,7 @@ octokit
 oidc
 onboarding
 pagerduty
+pageview
 parallelization
 plantuml
 postgres
@@ -0,0 +1,24 @@
+---
+id: installation
+title: Google Analytics Installation
+sidebar_label: Installation
+# prettier-ignore
+description: Adding Google Analytics to Your App
+---
+
+There is a basic Google Analytics integration built into Backstage. You can
+enable it by adding the following to your app configuration:
+
+```yaml
+app:
+  googleAnalyticsTrackingId: UA-000000-0
+```
+
+Replace the tracking ID with your own.
+
+For more information, learn about Google Analytics
+[here](https://marketingplatform.google.com/about/analytics/).
+
+The default behavior is only to send a pageview hit to Google Analytics. To
+record more, look at the developer documentation
+[here](https://developers.google.com/analytics/devguides/collection/gtagjs).
@@ -10,18 +10,8 @@ Backstage integrator.

 ## Google Analytics

-There is a basic Google Analytics integration built into Backstage. You can
-enable it by adding the following to your app configuration:
-
-```yaml
-app:
-  googleAnalyticsTrackingId: UA-000000-0
-```
-
-Replace the tracking ID with your own.
-
-For more information, learn about Google Analytics
-[here](https://marketingplatform.google.com/about/analytics/).
+See how to install Google Analytics in your app
+[here](../integrations/google-analytics/installation.md)

 ## Logging

@@ -112,6 +112,11 @@
        "type": "subcategory",
        "label": "LDAP",
        "ids": ["integrations/ldap/org"]
+      },
+      {
+        "type": "subcategory",
+        "label": "Google Analytics",
+        "ids": ["integrations/google-analytics/installation"]
      }
    ],
    "Plugins": [
@@ -70,6 +70,8 @@ nav:
          - Org Data: 'integrations/github/org.md'
      - LDAP:
          - Org Data: 'integrations/ldap/org.md'
+      - Google Analytics:
+          - Installation: 'integrations/google-analytics/installation.md'
  - Plugins:
      - Overview: 'plugins/index.md'
      - Existing plugins: 'plugins/existing-plugins.md'
@@ -48,6 +48,22 @@
      }
    </style>
    <title><%= app.title %></title>
+    <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId
+    === 'string') { %>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
+    </script>
+    <% } %>
  </head>
  <body style="margin: 0;">
    <noscript>You need to enable JavaScript to run this app.</noscript>