feat(jsbattle-webpage): add basic GA tracking

jamro · Apr 22, 2019 · 2f023d3 · 2f023d3
1 parent b5552ef
commit 2f023d3
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 4 deletions.
diff --git a/packages/jsbattle-docs/test/webpage.test.js b/packages/jsbattle-docs/test/webpage.test.js
@@ -20,6 +20,7 @@ describe('Web Page', function() {
       await this.page.close();
     }
     this.page = await this.browser.newPage();
+    await this.page.setUserAgent("puppeteer-test");
     this.consoleLog = [];
     this.page.on('console', msg => {
       for (let i = 0; i < msg.args().length; ++i) {

diff --git a/packages/jsbattle-server/src/lib/UbdArenaService.js b/packages/jsbattle-server/src/lib/UbdArenaService.js
@@ -52,6 +52,7 @@ module.exports = class UbdArenaService {
         this._log("Starting browser...");
         let browser = await puppeteer.launch();
         let page = await browser.newPage();
+        await this.page.setUserAgent("UbdArenaService");
         let url = `http://${this._options.webhost}:${this._options.webport}#ubdPlayer`;
         this._log(`Loading ${url}`);
         await page.goto(url);

diff --git a/packages/jsbattle-webpage/build/copy-libs.js b/packages/jsbattle-webpage/build/copy-libs.js
@@ -3,16 +3,74 @@
 const cpx = require("cpx");
 const fs = require('fs');
 const path = require('path');
+const Transform = require("stream").Transform
 
 let rawdata = fs.readFileSync(__dirname + "/libs.json");
 let libsdata = JSON.parse(rawdata);
 
 console.log(`Copying ${libsdata.length} file sets...`);
 
+function copyAsync(cmdlist) {
+  if(cmdlist.length == 0) return;
+  let cmd = cmdlist.shift();
+  let replaceInfo = '';
+  if(cmd.replace) {
+    replaceInfo = '(REPLACE)';
+  }
+  console.log(`  ${cmd.from} -> ${cmd.to} ${replaceInfo}`);
+  let from = path.resolve(__dirname + "/../" + cmd.from);
+  let to = path.resolve(__dirname + "/../" + cmd.to);
+  let opts = {};
+
+  if(cmd.replace) {
+    opts.transform = (filename) => new Transform({
+      writableObjectMode: true,
+      transform(chunk, encoding, callback) {
+        let pattern;
+        for(let replace of cmd.replace) {
+          patten = new RegExp(replace.pattern);
+          if(patten.test(filename)) {
+            if(process.env[replace.env] === undefined) {
+              console.error(`Error: No ENV "${replace.env}" is defined. Replacement for "${replace.match}" in ${filename} cannot be done`);
+              process.exit(1);
+            }
+            let text = chunk.toString(encoding);
+            pattern = new RegExp(replace.match, 'g')
+            text = text.replace(pattern, process.env[replace.env]);
+            chunk = Buffer.from(text);
+          }
+        }
+        callback(null, chunk);
+      }
+    });
+  }
+  cpx.copy(from, to, opts, () => copyAsync(cmdlist));
+}
+
+copyAsync(libsdata);
+
+/*
 libsdata.forEach((cmd) => {
-  console.log(`  ${cmd.from} -> ${cmd.to}`);
+  let replaceInfo = '';
+  if(cmd.replace) {
+    replaceInfo = '(REPLACE)';
+  }
+  console.log(`  ${cmd.from} -> ${cmd.to} ${replaceInfo}`);
   let from = path.resolve(__dirname + "/../" + cmd.from);
   let to = path.resolve(__dirname + "/../" + cmd.to);
-  cpx.copySync(from, to);
+  let ops = {};
+
+  if(cmd.replace) {
+    ops.transform = (filename) => {
+      console.log(filename);
+    }
+  }
+
+  cpx.copySync(from, to, ops);
 });
+*/
+
+
+
+
 console.log("Done");
diff --git a/packages/jsbattle-webpage/build/libs.json b/packages/jsbattle-webpage/build/libs.json
@@ -1,6 +1,16 @@
 [
   {"from": "/node_modules/jsbattle-engine/dist/**/*",           "to": "/dist"},
-  {"from": "/static/**/*",                                      "to": "/dist"},
+  {
+    "from": "/static/**/*",
+    "to": "/dist",
+    "replace": [
+      {
+        "pattern": "\\.(html?|js)$",
+        "match": "GA:XX-XXXXXXXXX-X",
+        "env": "JSBATTLE_GA_CODE"
+      }
+    ]
+  },
   {"from": "/node_modules/jsbattle-docs/dist/**/*",             "to": "/dist/docs"},
   {"from": "/node_modules/pixi.js/dist/pixi.min.js",            "to": "/dist/vendor"},
   {"from": "/node_modules/jquery/dist/jquery.min.js",           "to": "/dist/vendor"},

diff --git a/packages/jsbattle-webpage/features/step_definitions/navi_steps.js b/packages/jsbattle-webpage/features/step_definitions/navi_steps.js
@@ -48,6 +48,7 @@ Given('JsBattle open in the browser', async function () {
     await this.client.page.close();
   }
   this.client.page = await this.client.browser.newPage();
+  await this.client.page.setUserAgent("puppeteer-test");
   this.client.page.setCacheEnabled(false);
   await this.client.page.emulate({
     'name': 'Desktop',
@@ -71,6 +72,7 @@ Given('JsBattle replay for battle {string} open in the browser', async function
     await this.client.page.close();
   }
   this.client.page = await this.client.browser.newPage();
+  await this.client.page.setUserAgent("puppeteer-test");
   this.client.page.setCacheEnabled(false);
   await this.client.page.emulate({
     'name': 'Desktop',
@@ -228,6 +230,7 @@ Then('all visited images loaded successfully', async function () {
   });
 
   let testPage = await this.client.browser.newPage();
+  await testPage.setUserAgent("puppeteer-test");
   testPage.setCacheEnabled(false);
 
   for(var i=0; i < images.length; i++) {

diff --git a/packages/jsbattle-webpage/package-lock.json b/packages/jsbattle-webpage/package-lock.json
diff --git a/packages/jsbattle-webpage/static/index.html b/packages/jsbattle-webpage/static/index.html
@@ -1,6 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=GA:XX-XXXXXXXXX-X"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'GA:XX-XXXXXXXXX-X');
+    </script>
+
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">