add google analytics (ampproject#1364)

getzaymo · Jan 31, 2019 · d51f137 · d51f137
1 parent 20b96d8
commit d51f137
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 40 deletions.
diff --git a/boilerplate/build.js b/boilerplate/build.js
@@ -34,6 +34,7 @@ generateOptimizedAmpFiles(generatorPage);
 
 function initConfig() {
   const config = {
+    gaTrackingId: require('../platform/config/shared.json').gaTrackingId,
     categories: require('./data/categories.json'),
     formats: require('./data/formats.json'),
     templates: templates.find('./templates/files'),

diff --git a/boilerplate/templates/index.html b/boilerplate/templates/index.html
@@ -272,23 +272,19 @@ <h3>Bookend Sample</h3>
          role="button"
          on="tap:boilerplate.scrollTo(duration=200)"
          class="fab">View Code</div>
-    <amp-analytics type="googleanalytics" id="analytics">
-      <script type="application/json">
-        {
-          "vars": {
-            "account": "UA-73836974-1"
-          },
-          "triggers": {
-            "default pageview": {
-              "on": "visible",
-              "request": "pageview",
-              "vars": {
-                "title": "AMP Boilerplate Generator"
-              }
-            }
+    <amp-analytics type="gtag" data-credentials="include">
+    <script type="application/json">
+    {
+      "vars" : {
+        "gtag_id": "{{ gaTrackingId }}",
+        "config" : {
+          "{{ gaTrackingId }}": {
+            "groups": "default"
           }
         }
-      </script>
+      }
+    }
+    </script>
     </amp-analytics>
     <amp-install-serviceworker
       src="/sw.js"

diff --git a/boilerplate/templates/partials/analytics/google.html b/boilerplate/templates/partials/analytics/google.html
@@ -1,17 +1,15 @@
 \{{#googleAnalytics.selected}}
-<amp-analytics type="googleanalytics">
-  <script type="application/json">
-  {
-    "vars": {
-      "account": "\{{googleAnalytics.trackingId}}"
-    },
-    "triggers": {
-      "trackPageview": {
-        "on": "visible",
-        "request": "pageview"
+<script type="application/json">
+{
+  "vars" : {
+    "gtag_id": "{{ googleAnalytics.trackingId }}",
+    "config" : {
+      "{{ googleAnalytics.trackingId }}": {
+        "groups": "default"
       }
     }
   }
-  </script>
+}
+</script>
 </amp-analytics>
 \{{/googleAnalytics.selected}}
diff --git a/frontend/templates/layouts/default.j2 b/frontend/templates/layouts/default.j2
@@ -112,5 +112,20 @@
       <p class="ad-o-translation-hint-wrapper">{{ _('Sadly this page isn\'t yet translated, but we could use some help doing so: you maybe want to lend a hand?')}}</p>
     </aside>
     {% endif %}
+
+    <amp-analytics type="gtag" data-credentials="include">
+    <script type="application/json">
+    {
+      "vars" : {
+        "gtag_id": "{{ podspec.gaTrackingId }}",
+        "config" : {
+          "{{ podspec.gaTrackingId }}": {
+            "groups": "default"
+          }
+        }
+      }
+    }
+    </script>
+    </amp-analytics>
   </body>
 </html>
diff --git a/platform/config/shared.json b/platform/config/shared.json
@@ -2,5 +2,6 @@
 	"baseUrls": {
 	 	"playground": "/playground/#url=",
 		"repository": "https://github.com/ampproject/docs/blob/future/"
-	}
+	},
+  "gaTrackingId": "UA-67833617-1"
 }
diff --git a/platform/lib/config.js b/platform/lib/config.js
@@ -76,6 +76,8 @@ class Config {
                 + `  port: ${this.hosts.pages.port}\n`
                 + `  scheme: ${this.hosts.pages.scheme}\n`
                 + '\n'
+                + `gaTrackingId: ${this.shared.gaTrackingId}\n`
+                + '\n'
                 + 'base_urls:\n'
                 + `  repository: ${this.shared.baseUrls.repository}\n`
                 + `  playground: ${this.shared.baseUrls.playground}\n`

diff --git a/playground/src/analytics/base.js → playground/src/analytics/index.js b/playground/src/analytics/base.js → playground/src/analytics/index.js
@@ -12,13 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/* global ga */
-// https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/
-export const init = () => {
-  // Initialize the command queue in case analytics.js hasn't loaded yet.
-  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+const config = require('../../../platform/config/shared.json');
 
-  ga('create', 'UA-73836974-1', 'auto');
-  ga('set', 'transport', 'beacon');
-  ga('send', 'pageview');
-};
+class Analytics {
+  init() {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      // eslint-disable-next-line prefer-rest-params
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', config.gaTrackingId, {'use_amp_client_id': true});
+  }
+}
+
+export default new Analytics();
diff --git a/playground/src/app.critical.scss b/playground/src/app.critical.scss
@@ -77,6 +77,8 @@
   }
   #document-title {
     margin-left: auto;
+    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23005AF0'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");
+
   }
   #toolbar {
     margin-left: auto;
@@ -334,7 +336,7 @@ main > .panel + .panel {
 }
 
 .caret-right {
-  padding-right: 32px;
+  padding-right: 36px;
   background-repeat: no-repeat;
   background-position-y: 50%;
   background-position-x: 100%;

diff --git a/playground/src/app.js b/playground/src/app.js
@@ -41,10 +41,13 @@ import {runtimes, EVENT_SET_RUNTIME} from './runtime/runtimes.js';
 import detectRuntime from './runtime/detector.js';
 import addSplitPaneBehavior from './split-pane/base.js';
 import formatter from './formatter/';
+import analytics from './analytics';
 
 import './service-worker/base.js';
 import './request-idle-callback/base.js';
 
+analytics.init();
+
 // create editing/preview panels
 const editor = Editor.createEditor(document.getElementById('source'));
 const preview = Preview.createPreview(document.getElementById('preview'));
@@ -78,7 +81,7 @@ const runtimeChanged = (runtimeId) => {
 };
 
 const runtimeSelector = createSelector(document.getElementById('runtime-select'), {
-  classes: ['caret'],
+  classes: ['caret-right'],
   id: 'runtime',
   label: 'select runtime',
   values: runtimes.values.map((r) => {

diff --git a/playground/src/index.hbs b/playground/src/index.hbs
@@ -36,6 +36,7 @@
     <link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin>
     <link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin>
 
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{htmlWebpackPlugin.options.gaTrackingId}}"></script>
   </head>
   <body {{#htmlWebpackPlugin.options.embed}}class="embed"{{/htmlWebpackPlugin.options.embed}}>
     <header class="ad-o-header">
@@ -45,7 +46,7 @@
       <span class="ad-o-header-text ad-o-header-uppercase">Playground</span>
     </a>
 
-      <div id="document-title" tabindex="0" role="button" class="ad-o-header-text caret hidden">Untitled</div>
+      <div id="document-title" tabindex="0" role="button" class="ad-o-header-text caret-right hidden">Untitled</div>
       <div id="toolbar">
         {{> button/button.hbs id="error-indicator" class="elevation-2dp" text="Valid" disabled=true}}
         {{> button/button.hbs id="save-document" class="hidden" class2="underline" hideOnMobile=true  text="Save"}}

diff --git a/playground/src/preview/preview.js b/playground/src/preview/preview.js
@@ -113,7 +113,7 @@ class Preview {
 
   createPreviewSelect() {
     const select = this.doc.createElement('select');
-    select.setAttribute('class', 'caret');
+    select.setAttribute('class', 'caret-right');
     select.setAttribute('id', 'preview-size');
     select.setAttribute('label', 'select preview size');
     select.addEventListener('change', () => {

diff --git a/playground/webpack.config.js b/playground/webpack.config.js
@@ -7,6 +7,7 @@ const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin
 const PreloadWebpackPlugin = require('preload-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const config = require('../platform/config/shared.json');
 
 module.exports = (env, argv) => {
   const devMode = argv.mode !== 'production';
@@ -52,11 +53,13 @@ module.exports = (env, argv) => {
         template: './src/index.hbs',
         filename: './index.html',
         inlineSource: 'critical\..+$',
+        gaTrackingId: config.gaTrackingId,
       }),
       new HtmlWebpackPlugin({
         template: './src/index.hbs',
         filename: './embed.html',
         inlineSource: 'critical\..+$',
+        gaTrackingId: config.gaTrackingId,
         embed: true,
       }),
       new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),