@analytics/google-tag-manager - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.2.1](https://github.com/DavidWells/analytics/compare/@analytics/google-tag-manager@0.2.0...@analytics/google-tag-manager@0.2.1) (2019-10-14)
+
+**Note:** Version bump only for package @analytics/google-tag-manager
+
+
+
+
+
 # 0.2.0 (2019-10-07)
@@ -8,0 +16,0 @@

dist/@analytics/google-tag-manager.js

@@ -39,3 +39,3 @@ var analyticsGtagManager = (function () {
   /* global dataLayer */
-  var config$1 = {
+  var config = {
     debug: false,
@@ -46,3 +46,3 @@ containerId: null // assumesPageview: true,
      * Google tag manager plugin
-     * @link https://getanalytics.io/plugins/google-tag-manager/
+     * @link https://getanalytics.io/plugins/google-tag-manager
      * @link https://developers.google.com/tag-manager/
@@ -60,2 +60,3 @@ * @param {object} pluginConfig - Plugin settings
   };
+
   function googleTagManager$1() {
@@ -66,3 +67,3 @@ var pluginConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       NAMESPACE: 'google-tag-manager',
-      config: _objectSpread({}, config$1, pluginConfig),
+      config: _objectSpread({}, config, pluginConfig),
       initialize: function initialize(_ref) {
@@ -69,0 +70,0 @@ var config = _ref.config;

lib/analytics-plugin-google-tag-manager.browser.cjs.js

@@ -38,3 +38,3 @@ 'use strict';
 /* global dataLayer */
-var config$1 = {
+var config = {
   debug: false,
@@ -45,3 +45,3 @@ containerId: null // assumesPageview: true,
    * Google tag manager plugin
-   * @link https://getanalytics.io/plugins/google-tag-manager/
+   * @link https://getanalytics.io/plugins/google-tag-manager
    * @link https://developers.google.com/tag-manager/
@@ -59,2 +59,3 @@ * @param {object} pluginConfig - Plugin settings
 };
+
 function googleTagManager$1() {
@@ -65,3 +66,3 @@ var pluginConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     NAMESPACE: 'google-tag-manager',
-    config: _objectSpread({}, config$1, pluginConfig),
+    config: _objectSpread({}, config, pluginConfig),
     initialize: function initialize(_ref) {
@@ -68,0 +69,0 @@ var config = _ref.config;

lib/analytics-plugin-google-tag-manager.browser.es.js

@@ -36,3 +36,3 @@ function _defineProperty(obj, key, value) {
 /* global dataLayer */
-var config$1 = {
+var config = {
   debug: false,
@@ -43,3 +43,3 @@ containerId: null // assumesPageview: true,
    * Google tag manager plugin
-   * @link https://getanalytics.io/plugins/google-tag-manager/
+   * @link https://getanalytics.io/plugins/google-tag-manager
    * @link https://developers.google.com/tag-manager/
@@ -57,2 +57,3 @@ * @param {object} pluginConfig - Plugin settings
 };
+
 function googleTagManager$1() {
@@ -63,3 +64,3 @@ var pluginConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     NAMESPACE: 'google-tag-manager',
-    config: _objectSpread({}, config$1, pluginConfig),
+    config: _objectSpread({}, config, pluginConfig),
     initialize: function initialize(_ref) {
@@ -66,0 +67,0 @@ var config = _ref.config;

lib/analytics-plugin-google-tag-manager.cjs.js

 'use strict';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
-
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
-  }
-
-  return target;
-}
-
-var config = {};
-var NAMESPACE = 'google-tag-manager';
-
-var logMessage = function logMessage() {
-  console.log("".concat(NAMESPACE, " not available in node.js. Please use the google analytics plugin instead"));
-};
-/* Export the integration */
-
-
-function googleTagManager(userConfig) {
-  // Allow for userland overides of base methods
+function googleTagManager() {
+  /* returns noOp because no server side implementation exists */
   return {
-    NAMESPACE: NAMESPACE,
-    config: _objectSpread({}, config, userConfig),
-    initialize: function initialize(_ref) {
-      var config = _ref.config;
-      logMessage();
-    },
-    // page view
-    page: function page(_ref2) {
-      var payload = _ref2.payload,
-          config = _ref2.config;
-      logMessage();
-    },
-    // track event
-    track: function track(_ref3) {
-      var payload = _ref3.payload,
-          config = _ref3.config;
-      logMessage();
-    },
-    // identify user
-    identify: function identify(_ref4) {
-      var payload = _ref4.payload;
-      logMessage();
-    }
+    NAMESPACE: 'google-tag-manager'
   };
@@ -73,0 +8,0 @@ }

lib/analytics-plugin-google-tag-manager.es.js

@@ -1,70 +0,5 @@
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
-
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
-  }
-
-  return target;
-}
-
-var config = {};
-var NAMESPACE = 'google-tag-manager';
-
-var logMessage = function logMessage() {
-  console.log("".concat(NAMESPACE, " not available in node.js. Please use the google analytics plugin instead"));
-};
-/* Export the integration */
-
-
-function googleTagManager(userConfig) {
-  // Allow for userland overides of base methods
+function googleTagManager() {
+  /* returns noOp because no server side implementation exists */
   return {
-    NAMESPACE: NAMESPACE,
-    config: _objectSpread({}, config, userConfig),
-    initialize: function initialize(_ref) {
-      var config = _ref.config;
-      logMessage();
-    },
-    // page view
-    page: function page(_ref2) {
-      var payload = _ref2.payload,
-          config = _ref2.config;
-      logMessage();
-    },
-    // track event
-    track: function track(_ref3) {
-      var payload = _ref3.payload,
-          config = _ref3.config;
-      logMessage();
-    },
-    // identify user
-    identify: function identify(_ref4) {
-      var payload = _ref4.payload;
-      logMessage();
-    }
+    NAMESPACE: 'google-tag-manager'
   };
@@ -71,0 +6,0 @@ }

package.json

 {
   "name": "@analytics/google-tag-manager",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Google tag manager plugin for 'analytics' module",
+  "projectMeta": {
+    "provider": {
+      "name": "Google Tag Manager",
+      "url": "https://tagmanager.google.com/"
+    },
+    "platforms": {
+      "browser": "./src/browser.js"
+    }
+  },
   "keywords": [
@@ -46,3 +55,3 @@ "analytics",
   },
-  "gitHead": "5f72d19e5b5a0dec7451d6821905995872c73fdc"
+  "gitHead": "159c0f42b5af886af963a0a65e1f5c3c33f023f2"
 }

README.md

@@ -1,24 +0,45 @@
-# Google Tag Manager plugin for `analytics`
+<!--
+title: Google Tag Manager
+description: Using the google tag manager plugin
+-->
+# Google Tag Manager plugin for analytics
 
 Integration with google tag manager for [analytics](https://www.npmjs.com/package/analytics)
 
+This analytics plugin will load google tag manager into your application.
+
 For more information [see the docs](https://getanalytics.io/plugins/google-tag-manager/).
 
-<!-- ANALYTICS_DOCS:START (TOC) -->
-- [Usage](#usage)
-- [Configure Google Tag Manager](#configure-google-tag-manager)
-- [Plugin Options](#plugin-options)
-<!-- ANALYTICS_DOCS:END (TOC) -->
+<!-- AUTO-GENERATED-CONTENT:START (TOC:collapse=true&collapseText=Click to expand) -->
+<details>
+<summary>Click to expand</summary>
 
-<!-- ANALYTICS_DOCS:START (USAGE) -->
-## Usage
+- [Installation](#installation)
+- [How to use](#how-to-use)
+- [Browser usage](#browser-usage)
+  * [Browser API](#browser-api)
+- [Platforms Supported](#platforms-supported)
+- [Additional examples](#additional-examples)
+- [Configuring GTM](#configuring-gtm)
 
+</details>
+<!-- AUTO-GENERATED-CONTENT:END (TOC) -->
+
+## Installation
+
 Install `analytics` and `@analytics/google-tag-manager` packages
 
 ```bash
-npm install analytics @analytics/google-tag-manager
+npm install analytics
+npm install @analytics/google-tag-manager
 ```
 
-Import and initialize in project
+<!-- AUTO-GENERATED-CONTENT:START (PLUGIN_DOCS) -->
 
+## How to use
+
+The `@analytics/google-tag-manager` package works in [the browser](#browser-usage). To use, install the package, include in your project and initialize the plugin with [analytics](https://www.npmjs.com/package/analytics).
+
+Below is an example of how to use the browser plugin.
+
 ```js
@@ -32,47 +53,159 @@ import Analytics from 'analytics'
     googleTagManager({
-      containerId: 'GTM-123xyz',
+      containerId: 'GTM-123xyz'
     })
-    // ... other plugins
   ]
 })
 
-/* Track page views */
+/* Track a page view */
 analytics.page()
 
-/* Track custom events */
-analytics.track('buttonClicked')
+/* Track a custom event */
+analytics.track('cartCheckout', {
+  item: 'pink socks',
+  price: 20
+})
 
-/* Identify visitors */
-analytics.identify('user-xzy-123', {
-  name: 'Bill Murray',
-  cool: true
-})
 ```
-<!-- ANALYTICS_DOCS:END -->
 
-## Configure Google Tag Manager
+After initializing `analytics` with the `googleTagManager` plugin, data will be sent into Google Tag Manager whenever [analytics.page](https://getanalytics.io/api/#analyticspage), or [analytics.track](https://getanalytics.io/api/#analyticstrack) are called.
 
-Make sure you have your google tags manager setup to fire on Page views.
+See [additional implementation examples](#additional-examples) for more details on using in your project.
 
-If you are using a SPA you want to listen to history changes as well.
+## Browser usage
 
-![image](https://user-images.githubusercontent.com/532272/52185417-538fe500-27d4-11e9-9500-abf702e5d802.png)
+The Google Tag Manager client side browser plugin works with these analytic api methods:
 
-<!-- ANALYTICS_DOCS:START (API) -->
-## Plugin Options
+- **[analytics.page](https://getanalytics.io/api/#analyticspage)** - Sends page views into Google Tag Manager 
+- **[analytics.track](https://getanalytics.io/api/#analyticstrack)** - Track custom events and send to Google Tag Manager 
 
-**Arguments**
+### Browser API
 
-- **pluginConfig** <code>object</code> - Plugin settings
-- **pluginConfig.containerId** <code>string</code> - The Container ID uniquely identifies the GTM Container.
-
-**Example**
-
 ```js
-googleTagManager({
-  containerId: 'GTM-123xyz'
+const analytics = Analytics({
+  app: 'awesome-app',
+  plugins: [
+    googleTagManager({
+      containerId: 'GTM-123xyz'
+    })
+  ]
 })
+
 ```
-<!-- ANALYTICS_DOCS:END -->
 
+**Initialization arguments**
+
+- **pluginConfig** `object` Plugin settings
+- **pluginConfig.containerId** `string` The Container ID uniquely identifies the GTM Container.
+
+
+## Platforms Supported
+
+The `@analytics/google-tag-manager` package works in [the browser](#browser-usage)
+
+## Additional examples
+
+Below are additional implementation examples.
+
+<details>
+  <summary>Using in HTML</summary>
+
+  Below is an example of importing via the unpkg CDN. Please note this will pull in the latest version of the package.
+
+  ```html
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Using @analytics/google-tag-manager in HTML</title>
+      <script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
+      <script src="https://unpkg.com/@analytics/google-tag-manager/dist/@analytics/google-tag-manager.min.js"></script>
+      <script type="text/javascript">
+        /* Initialize analytics */
+        var Analytics = _analytics.init({
+          app: 'my-app-name',
+          plugins: [
+            analyticsGtagManager({
+              containerId: 'GTM-123xyz'
+            })
+          ]
+        })
+
+        /* Track a page view */
+        analytics.page()
+
+        /* Track a custom event */
+        analytics.track('cartCheckout', {
+          item: 'pink socks',
+          price: 20
+        })
+      </script>
+    </head>
+    <body>
+      ....
+    </body>
+  </html>
+
+  ```
+
+</details>
+
+<details>
+  <summary>Using in HTML via ES Modules</summary>
+
+  Using `@analytics/google-tag-manager` in ESM modules.
+
+  ```html
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Using @analytics/google-tag-manager in HTML via ESModules</title>
+      <script>
+        // Polyfill process.
+        // **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
+        window.process = window.process || { env: { NODE_ENV: 'production' } }
+      </script>
+      <script type="module">
+        import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
+        import analyticsGtagManager from 'https://unpkg.com/@analytics/google-tag-manager/lib/analytics-plugin-google-tag-manager.browser.es.js?module'
+        /* Initialize analytics */
+        const Analytics = analytics({
+          app: 'analytics-html-demo',
+          debug: true,
+          plugins: [
+            analyticsGtagManager({
+              containerId: 'GTM-123xyz'
+            })
+            // ... add any other third party analytics plugins
+          ]
+        })
+
+        /* Track a page view */
+        analytics.page()
+
+        /* Track a custom event */
+        analytics.track('cartCheckout', {
+          item: 'pink socks',
+          price: 20
+        })
+      </script>
+    </head>
+    <body>
+      ....
+    </body>
+  </html>
+
+  ```
+
+</details>
+
+
+<!-- AUTO-GENERATED-CONTENT:END (PLUGIN_DOCS) -->
+
+## Configuring GTM
+
+Make sure you have your google tags manager setup to fire on Page views.
+
+If you are using a SPA you want to listen to history changes as well.
+
+![image](https://user-images.githubusercontent.com/532272/52185417-538fe500-27d4-11e9-9500-abf702e5d802.png)
+
 See the [full list of analytics provider plugins](https://getanalytics.io/plugins/) in the main repo.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24413

increased by4.92%

Number of downloads

23642

increased by2.68%

Number of lines in readme file

211

increased by170.51%

Worsened metrics

Lines of code

410

decreased by-21.46%

No dependency changes