Merge pull request #1125 from bolt-design-system/feature/analytics-au…

…tolink

Add Google Analytics Autolink Helper

.boltrc.js

@@ -47,6 +47,11 @@ const nonImageFixtures = globby.sync([
 ]);
 const itemsToCopy = [];
 
+const allComponentPackages = globby
+.sync(path.join(__dirname, './packages/components/**/*/package.json'))
+.map(pkgPath => require(pkgPath))
+.map(pkg => pkg.name);
+
 nonImageFixtures.forEach((fixturePath) => {
   itemsToCopy.push({
     from: path.join(__dirname, fixturePath),
@@ -68,10 +73,8 @@ module.exports = {
   buildDir: adjustRelativePath(siteConfig.buildDir),
   iconDir: [],
   components: {
-    global: globby
-      .sync(path.join(__dirname, './packages/components/**/*/package.json'))
-      .map(pkgPath => require(pkgPath))
-      .map(pkg => pkg.name),
+    global: [...allComponentPackages, '@bolt/analytics-autolink'],
+
   },
   alterTwigEnv: siteConfig.alterTwigEnv,
   images: {

docs-site/.boltrc.js

@@ -74,6 +74,7 @@ const config = {
     global: [
       '@bolt/global',
       '@bolt/schema-form',
+      '@bolt/analytics-autolink',
       '@bolt/components-placeholder',
       '@bolt/components-action-blocks',
       '@bolt/components-dropdown',

docs-site/__tests__/pattern-lab.e2e.js

@@ -18,6 +18,7 @@ module.exports = {
     console.log(`global browser url: ${testingUrl}`);
     browser
       .url(`${testingUrl}/pattern-lab/?p=components-overview`)
+      .waitForElementVisible('.pl-js-open-new-window', 3000)
       .waitForElementVisible('pl-header', 3000)
       .assert.elementPresent('.js-c-typeahead__input')
       .click('.js-c-typeahead__input'); // click on the PL search input

docs-site/__tests__/server-side-rendering.e2e.js

@@ -9,6 +9,7 @@ module.exports = {
         `screenshots/pattern-lab/button-component-docs--${browser.capabilities
           .browserName || 'chrome'}.png`,
       )
+      .waitForElementVisible('.pl-js-open-new-window', 3000)
       .getAttribute('.pl-js-open-new-window', 'href', function(result) {
         browser.url(result.value);
       })

docs-site/package.json

@@ -26,6 +26,7 @@
     "watch": "bolt watch"
   },
   "dependencies": {
+    "@bolt/analytics-autolink": "^2.3.0",
     "list.js": "^1.5.0",
     "@bolt/build-tools": "^2.3.0",
     "@bolt/components-action-blocks": "^2.3.0",

docs-site/src/components/schema-form/component-explorer.js

@@ -88,9 +88,11 @@ export default class ComponentExplorer extends withContext(withLitHtml()) {
   async requestRender(formData) {
     const self = this;
 
+    // experimental: instead of requiring every branch to do a full docker deployment, 
+    // enable CORS support on the master branch and only require Docker deploys on that one branch 
     if (formData && formData !== '') {
       const res = await fetch(
-        `/api/render?${qs.stringify({
+        `https://master.boltdesignsystem.com/api/render?${qs.stringify({
           template: this.props.template,
         })}`,
         {

jest.config.js

@@ -2,7 +2,8 @@
 const globby = require('globby');
 const testFilesToIgnore = globby.sync([
   './packages/components/**/*/__tests__/*.e2e.js',
-  './packages/components/**/*/__tests__/*.data.js',
+  './packages/components/**/*/__tests__/**/*.data.js',
+  './packages/analytics/**/*/__tests__/**/*.data.js',
   './packages/generator-bolt/generators/*/templates/**/*.test.js',
 ]);
 
@@ -24,7 +25,7 @@ module.exports = {
   },
   transformIgnorePatterns: [
     'node_modules/(?!(lit-html|@bolt|@open-wc)/)', // add any additional packages in node_modules that need to be transpiled for Jest
-    'packages/(?!(components|core)/)', // add any additional packages in node_modules that need to be transpiled for Jest
+    'packages/(?!(components|core|analytics)/)', // add any additional packages in node_modules that need to be transpiled for Jest
     './scripts/monorepo.test.js',
   ],
   globalSetup: './jest-global-setup.js',

now.v2.json

@@ -0,0 +1,14 @@
+{
+  "version": 2,
+  "scope": "boltdesignsystem",
+  "name": "boltdesignsystem",
+  "builds": [
+    {
+      "src": "**/*",
+      "use": "@now/static"
+    }
+  ],
+  "routes": [
+    { "src": "/.*", "headers": { "Access-Control-Allow-Origin": "*" } }
+  ]
+}

package.json

@@ -116,7 +116,7 @@
     "lerna": "^3.13.1",
     "nightwatch": "^1.0.19",
     "node-fetch": "^2.3.0",
-    "now": "latest",
+    "now": "^15.0.1",
     "npm-run-all": "^4.1.5",
     "os": "^0.1.1",
     "os-name": "^3.0.0",
@@ -135,6 +135,7 @@
       "packages/build-tools",
       "packages/generator-bolt",
       "packages/api",
+      "packages/analytics/*",
       "packages/build-tools/plugins/*",
       "packages/components/*",
       "packages/drupal-twig-extensions",

packages/analytics/autolink/README.md

@@ -0,0 +1,93 @@
+# Bolt Autolink
+
+Helper library to automatically applies GA [autolink](https://developers.google.com/analytics/devguides/collection/analyticsjs/linker) click tracking query strings to Bolt components that point to external domains.
+
+
+## Install
+```bash
+npm install @bolt/analytics-autolink
+```
+
+## Usage
+
+### Step 1. Pull in the JS bundle into your local front-end build.
+
+- Via Bolt's `.boltrc.js` config:
+```javascript
+module.exports = {
+  components: {
+    global: [
+      '@bolt/analytics-autolink',
+      //...
+    ]
+  }
+}
+```
+
+- Or for existing build processes (ex. Webpack), simply import the main JS bundle:
+```javascript
+// ex. main.js
+import '@bolt/analytics-autolink';
+//
+```
+
+### 2. Config GA + Autolink
+
+For example, a typical GA config might look similar to this:
+
+```html
+<head>
+  <script src="https://www.google-analytics.com/analytics.js" async></script>
+
+  <script>
+    // replace with your own GA tracking #
+    const TRACKING_ID = 'UA-123456789-0'; 
+
+    // prep GA data if it doesn't yet exist
+    window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+
+    ga('create', TRACKING_ID, 'auto', { allowLinker: true });
+    ga('send', 'pageview');
+    ga('set', 'transport', 'beacon');
+    ga('require', 'linker');
+
+    // See Step 3 below on configuring which domains to track
+    // window.bolt = window.bolt || {};
+    // window.bolt.analytics = window.bolt.analytics || {};
+    // window.bolt.analytics.autolink = window.bolt.analytics.autolink || {
+    //   domains: ['google.com'] // domains to configure
+    // };
+    // ga('linker:autoLink', window.bolt.analytics.autolink.domains);
+  </script>
+```
+
+### 3. Configure which domains to autolink
+
+Option 1. Via a global Bolt config. For example:
+
+```html
+  <script>
+    window.bolt = window.bolt || {};
+    window.bolt.autolink = {
+      domains: ['google.com'], // domains to track
+    };
+
+    // make sure GA's linker:autoLink points to the domains configured
+    ga('linker:autoLink', window.bolt.autolink.domains);
+  </script>
+```
+
+Option 2. This can also be configured via a Drupal config. For example:
+
+```html
+  <script>
+    window.drupalSettings = {
+      google_analytics: {
+        trackCrossDomains: ['pega.com'], // domains to track
+      },
+    };
+
+    // make sure GA's linker:autoLink points to the domains configured
+    ga('linker:autoLink', window.drupalSettings.google_analytics.trackCrossDomains);
+  </script>
+```