address KS's final change requests

Author: pedrosilva0111

.gitignore

@@ -8,10 +8,6 @@
 # testing
 /coverage
 
-# production
-/build
-/dist
-
 # Webstorm IDE
 /.idea
 

Gruntfile.js

@@ -20,13 +20,24 @@ module.exports = function(grunt) {
 
   grunt.initConfig({
     'pkg': grunt.file.readJSON('package.json'),
+
     'closure-compiler': {
       options: {
+        // All files must be listed explicitly in the right order or
+        // strange errors will occur in the demo site.
         js: [
           'node_modules/google-closure-library/closure/goog/base.js',
-          'data-layer-helper/src/**.js',
-          'src/**.js',
-          '!src/main.js',
+          'data-layer-helper/src/logging.js',
+          'data-layer-helper/src/plain/plain.js',
+          'data-layer-helper/src/helper/utils.js',
+          'data-layer-helper/src/helper/data-layer-helper.js',
+          'src/logging.js',
+          'src/storage/**.js',
+          'src/eventProcessor/EventProcessorInterface.js',
+          'src/eventProcessor/generateUniqueId.js',
+          'src/eventProcessor/GoogleAnalyticsEventProcessor.js',
+          'src/config/configProcessors.js',
+          'src/config/setup.js',
           '!src/eventProcessor/EventProcessorInterface.js',
           '!src/storage/StorageInterface.js',
         ],
@@ -41,6 +52,7 @@ module.exports = function(grunt) {
         language_out: 'ECMASCRIPT5_STRICT',
         output_wrapper: '(function(){%output%})();',
         jscomp_warning: 'lintChecks',
+        generate_exports: true,
       },
       distribution: {
         files: {
@@ -55,10 +67,21 @@ module.exports = function(grunt) {
           'dist/measure-debug.js': 'src/main.js',
         },
         options: {
-          define: 'ML_DEBUG=true',
+          define: 'ML_DEBUG=true, DLH_DEBUG=true',
           create_source_map: 'dist/measure-debug.js.map',
         },
       },
+      site: {
+        files: {
+          'demo/public/measure-no-config.js': 'src/mainNoConfig.js',
+        },
+        options: {
+          // If we set ML_DEBUG to true, then the site will not send
+          // events to google analytics, instead sending a debug
+          // request and posting results in the console.
+          define: 'DLH_DEBUG=true',
+        },
+      },
     },
     'karma': {
       options: {

README.md

@@ -15,23 +15,14 @@ Measurement library will provide an open source alternative for sites/apps to se
 - [Usage](#usage)
     - [Event Command](#event-command)
     - [Set Command](#set-command)
-- [Event Processors](#event-processors)
-    - [Google Analytics](#google-analytics)
-    - [Custom Event Processor](#custom-event-processor)
-- [Storage Interfaces](#storage-interfaces)
-    - [Cookies](#cookies)
-    - [Custom Storage Interface](#custom-storage-interface)
-- [Local Setup](#local-setup)
-    - [Creating the build](#creating-the-build)
-    - [Running Tests Interactively](#running-tests-interactively)
 
 # Overview
 Measurement Library is a utility to help developers send data collected from their website to
 other libraries for analytics. After specifying settings in a script tag, you can process any
 sent events using a variety of built in event processors (e.g. sending data to Google Analytics).
 
 Data from events or generated by event processors is automatically saved to persist between visits using your choice of
-a variety of different storage options (e.g. cookies).
+a variety of different storage options (e.g. cookies). [Read the docs](https://googleinterns.github.io/measurement-library/#) to learn more.
 
 # Installation
 First, install the package with your favorite package manager:
@@ -41,152 +32,46 @@ yarn add measurement-library
 npm install measurement-library
 ```
 
-Next, choose [the event processor](#event-processors) and [the storage implementation](#storage-interfaces)
+Next, choose [the event processor](https://googleinterns.github.io/measurement-library/#EventProcessors) and 
+[the storage implementation]((https://googleinterns.github.io/measurement-library/#StorageInterfaces))
 to use and include this code in your `<head>` tag. It should be placed as high up in the block as possible
 in order to catch users who leave immediately after loading the page, then immediately leave.
 ```html
 <!-- Measurement Library Snippet -->
-<script async src="./node_modules/measurement-library/dist/measure"/>
+<script async src="/node_modules/measurement-library/dist/measure"/>
 <script>
   window.dataLayer = window.dataLayer || [];
   function measure(){dataLayer.push(arguments);}
-  // One or more config commands. To send data to google analytics while 
+  // One or more config commands. To send data to google analytics while
   // using cookies for storage:
-  measure('config', 'googleAnalytics', {}, 'cookies', {});
+  measure('config', 'googleAnalytics', {
+    'measurement_id': YOUR_MEASUREMENT_ID,
+    'api_secret': YOUR_API_SECRET,
+  }, 'cookies', {});
 </script>
 ```
 
-[//]: # (TODO kj: Make the config command use the right settings for google analytics)
-
 As an alternative, you can use the development version when testing your page. The dev version has a bigger file size,
 but reports possible errors to the console.
 ```html
 <!-- Measurement Library Snippet (Development Version) -->
-<script async src="./node_modules/measurement-library/dist/measure-debug"/>
+<script async src="/node_modules/measurement-library/dist/measure-debug"/>
 <script>/* Configure script like last example. */ </script>
 ```
 
 # Usage
-After setting up the script tags, you can begin to use the library. All commands
-are processed by passing arguments to the  `measure()` function. 
+After setting up the script tag using the `config` command, you can begin to use the library. All commands
+are processed by passing arguments to the `measure()` function. 
+
 
 ## Event command
 When you run the command `measure('event', eventName, eventOptions)`, all registered
-[event processors](#event-processors) will read the event and perform actions corresponding
+[event processors](https://googleinterns.github.io/measurement-library/#EventProcessors) will read the event and perform actions corresponding
 to their API.
 
 ## Set command
 To save parameters beyond the current page, you can call the command `measure('set', key, value)`.
 The registered event processor will determine if the value should be saved, how long the value should
-be saved for, and save it. To overwrite this behavior, you can specify a third time-to-live parameter:
-`measure('set', key, value, secondsToLive)`. In particular, if `secondsToLive` is 0, no data will be saved
-to long term storage.
-
-The set command can also be used to set parameters related to a implementation of
-an event processor or storage interface. For example, to modify the default parameters
-of the cookies storage, run a `set` command in the script tag before calling
-`config`. 
-
-```js
-// Set the default cookie parameters
-measure('set', 'cookies', {prefix: 'my_', expires: 11});
-// Use the default cookie parameters: prefix 'my_' and expires 11.
-measure('config', 'eventProcessorName', {}, 'cookies', {});
-// Override a default cookie parameter: expires is 22 for this storage.
-measure('config', 'eventProcessorName', {}, 'cookies', {expires: 22});
-```
-
-# Event Processors
-## Google Analytics
- [//]: # (TODO: kj)
-
-## Custom Event Processor
-If none of the built-in processors fit your needs, you can create your own event processor.
-An event processor is a class with the 2 methods described in [eventProcessorInterface.js](/src/eventProcessor/EventProcessorInterface.js)
-in addition to a constructor that takes an options object as it's only parameter.
-
-```html
-<script async src="./node_modules/measurement-library/dist/measure"/>
-<script>
-    window.dataLayer = window.dataLayer || [];
-    function measure(){dataLayer.push(arguments);}
-    class MyProcessor {
-      constructor({theNumber});
-      processEvent(storageInterface, modelInterface, eventName, eventOptions);
-      persistTime(key, value);
-    }
-    // Call the class constructor  
-    measure(config, myProcessor, {theNumber: 42}, 'cookies', {});
-    // Calls the processEvent function with parameters 
-    // (cookies storage, short term storage, 'jump', {height: 6}).
-    measure('event', 'jump', {height: 6})
-    // Sets a value in the storage with secondsToLive determined by
-    // the persistTime function of the event processor.
-    measure('set', 'key', 'value');
-</script>
-```
-
-# Storage Interfaces
-## Cookies
- [//]: # (TODO: pedro)
-
-## Custom Storage Interface
-If none of the built-in storage systems fit your needs, you can create your own storage interface.
-A storage interface is a class with the 2 methods described in [storageInterface.js](/src/storage/StorageInterface.js)
-in addition to a constructor that takes an options object as it's only parameter.
-
-```html
-<script async src="./node_modules/measurement-library/dist/measure"/>
-<script>
-    window.dataLayer = window.dataLayer || [];
-    function measure(){dataLayer.push(arguments);}
-    class MyStorage {
-      constructor({theNumber});
-      save(key, value, secondsToLive= 3600*24) {};
-      load(key, defaultValue= undefined) {};
-    }
-    // Call the class constructor.
-    measure(config, 'eventProcessorName', {}, MyStorage, {theNumber: 42});
-    // Call the save command with secondsToLive determined by the persistTime
-    // function of the event processor.
-    measure('set', 'key', 'value');
-</script>
-```
-
-# Local Setup
-## Creating The Build
-You will need to have either [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
-or [yarn](https://classic.yarnpkg.com/en/docs/install/#debian-stable) installed.
-
-First, install dependencies with yarn or npm
-```shell script
-yarn install
-# or
-npm install
-```
-
-Next, run the tests using yarn or npm:
-
-```shell script
-yarn test
-# or
-npm run test
-```
-
-## Running Tests Interactively
-You can also run the tests "interactively" via Karma directly.
-
-```shell script
-yarn unit
-# or
-npm run unit
-```
-
-To run the integration tests instead of the unit tests,
-
-```shell script
-yarn integration
-# or
-npm run integration
-```
-****
+be saved for, and save it in the corresponding [storage](https://googleinterns.github.io/measurement-library/#StorageInterfaces).
+To overwrite this behavior, you can specify a third time-to-live parameter:
+`measure('set', key, value, secondsToLive)`. In particular, if `secondsToLive` is 0, no data will be saved to long term storage.

data-layer-helper

@@ -1 +1,3 @@
-REACT_APP_GA_TRACKING_ID=G-70CMQK5VQE
+REACT_APP_GTAG_TRACKING_ID=G-70CMQK5VQE
+REACT_APP_MEASURE_TRACKING_ID=G-V6EDGQKHCW
+REACT_APP_MEASURE_API_SECRET=hteq-xzISAqOQpb0oNSiEw

demo/.env

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "prismjs": "^1.20.0",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
-    "react-dom": "^16.13.1",
-    "react-icons": "^3.10.0",
-    "react-modal-image": "^2.5.0",
-    "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
-    "redux": "^4.0.5",
-    "uuid": "^8.1.0"
+    "@testing-library/jest-dom": "~4.2.4",
+    "@testing-library/react": "~9.5.0",
+    "@testing-library/user-event": "~7.2.1",
+    "prismjs": "~1.21.0",
+    "react": "~16.13.1",
+    "react-bootstrap": "~1.3.0",
+    "react-dom": "~16.13.1",
+    "react-icons": "~3.10.0",
+    "react-modal-image": "~2.5.0",
+    "react-redux": "~7.2.0",
+    "react-router-dom": "~5.2.0",
+    "react-scripts": "~3.4.3",
+    "redux": "~4.0.5",
+    "uuid": "~8.3.0"
   },
   "scripts": {
     "start": "serve -s build",
@@ -42,9 +42,7 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^6.6.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-react": "^7.20.0",
-    "prop-types": "^15.7.2"
+    "eslint-plugin-react": "~7.20.0",
+    "prop-types": "~15.7.2"
   }
 }

demo/package.json

@@ -1,11 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_TRACKING_ID%"></script>
+    <!-- Include gtag on the default data layer -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GTAG_TRACKING_ID%"></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    </script>
+    <!-- Include measurement library. We could run this on the default data
+         layer, but it would send duplicate events with gtag. Though the
+         two libraries are fairly compatible, to be safe, this snippet
+         constructs measurement library using a different dataLayer.
+         To do this, we do not load the library asynchronously and include
+         a measure-setup compiled file that does not run commands on load,
+         then call it in the setup script. -->
+    <script src="/measure-no-config.js"></script>
+    <script>
+      measureDataLayer = [];
+      window.setupMeasure(measureDataLayer);
+      function measure(){measureDataLayer.push(arguments);}
+      measure("config", "googleAnalytics", {
+            "measurement_id": "%REACT_APP_MEASURE_TRACKING_ID%",
+            "api_secret": "%REACT_APP_MEASURE_API_SECRET%"
+          }, "cookies", {});
     </script>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />