redux-gtm - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

docs/event-definition.md

@@ -7,3 +7,3 @@ ## eventDefinition `Object`
      eventName: 'my-app-page-view',
-     eventFields: (state, action) => ({
+     eventFields: (prevState, action) => ({
        route: action.payload.location.pathname,
@@ -26,5 +26,5 @@ }),
 like to emit with the event. Any function assigned to this property
-will receive the state of the application, and the associated action
-object. Any properties in the object returned by the attached function
-will be emitted along with the event.
+will receive the state of the application (before the action), and the
+associated action object. Any properties in the object returned by the
+attached function will be emitted along with the event.
 
@@ -31,0 +31,0 @@ #### eventDefinition.eventSchema (Optional) `Object`

docs/examples/example1.md

@@ -29,3 +29,3 @@ ## How do I pageviews when using React Router?
     eventName: 'my-app-page-view' // The name of the custom GTM event
-    eventFields: (state, action) => ({
+    eventFields: (prevState, action) => ({
       // Map the custom Data Layer variable to the new route
@@ -32,0 +32,0 @@ route: action.payload.location.pathname,

index.d.ts

@@ -31,3 +31,3 @@ // Type definitions for redux-gtm
   eventName?: string;
-  eventFields? (state: any, action: any): any;
+  eventFields? (prevState: any, action: any): any;
   eventSchema?: EventSchema;
@@ -34,0 +34,0 @@ }

lib/create-event.js

@@ -1,7 +0,6 @@
-function createEvent(eventDefinition, state, action) {
-
+function createEvent(eventDefinition, prevState, action) {
   const event = { event: eventDefinition.eventName || action.type };
 
   if (typeof eventDefinition.eventFields === 'function') {
-    const payload = eventDefinition.eventFields(state, action);
+    const payload = eventDefinition.eventFields(prevState, action);
     return Object.assign({}, event, payload);
@@ -8,0 +7,0 @@ }

lib/create-middleware.js

@@ -8,12 +8,10 @@ const createEvent = require('./create-event');
 
-  const result = next(action);
-
   const eventDefinition = actionsToTrack[action.type];
 
   if (dataLayer === undefined || !eventDefinition) {
-    return result;
+    return next(action);
   }
 
-  const state = store.getState();
-  const event = createEvent(eventDefinition, state, action);
+  const prevState = store.getState();
+  const event = createEvent(eventDefinition, prevState, action);
 
@@ -26,5 +24,5 @@ const isValidEvent =  validateEvent(event, eventDefinition);
 
-  return result;
+  return next(action);
 };
 
 module.exports = createMiddleware;

package.json

 {
   "name": "redux-gtm",
-  "version": "0.1.1",
-  "description": "Synchronizes Redux and the Analytics Data Layer",
+  "version": "0.2.0",
+  "description": "Synchronize Redux actions with Google Tag Manager events",
   "main": "lib/index.js",
   "typings": "./index.d.ts",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "test:cov": "npm test -- --coverage",
+    "lint": "eslint src test",
+    "check": "npm run lint && npm run test"
   },
@@ -13,5 +17,20 @@ "engines": {
   },
-  "author": "",
+  "keywords": [
+    "redux-gtm",
+    "redux",
+    "google tag manager",
+    "google analytics",
+    "analytics"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rangle/redux-gtm.git"
+  },
   "license": "MIT",
   "devDependencies": {
+    "eslint": "^3.8.1",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.4.1",
     "jest": "^16.0.1",
@@ -18,0 +37,0 @@ "redux": "^3.6.0",

README.md

 # redux-gtm
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](LICENSE)
+[![npm version](https://badge.fury.io/js/redux-gtm.svg)](https://badge.fury.io/js/redux-gtm)
+[![CircleCI](https://circleci.com/gh/rangle/redux-gtm.svg?style=svg)](https://circleci.com/gh/rangle/redux-gtm)
 
@@ -4,0 +6,0 @@ > Synchronize Redux actions with Google Tag Manager events

test/create-event.js

 const createEvent = require('../lib/create-event');
 
-describe('createEvent(eventDefinition, state, action)', () => {
+describe('createEvent(eventDefinition, prevState, action)', () => {
   // createEvent takes in an event definition, a state object,
@@ -25,6 +25,6 @@ // and an action object. It returns a new event object with
 
-    const state = { prop1: 'data1' };
+    const prevState = { prop1: 'data1' };
     const action = { type: 'SOME_REDUX_ACTION' };
 
-    const actual = createEvent(eventDefinition, state, action);
+    const actual = createEvent(eventDefinition, prevState, action);
     const expected = {
@@ -37,3 +37,3 @@ event: 'some-event',
     expect(eventFields).toHaveBeenCalled();
-    expect(eventFields).toHaveBeenCalledWith(state, action);
+    expect(eventFields).toHaveBeenCalledWith(prevState, action);
     expect(actual).toEqual(expected);
@@ -40,0 +40,0 @@ });

test/middleware.js

@@ -11,3 +11,3 @@ const { createStore, applyMiddleware } = require('redux');
     if (action.type === 'FORM_FILL_ENDED') {
-      return Object.assign({}, state, { formFillEndTime: 10 });
+      return Object.assign({}, state, { formFillStartTime: 0 });
     }
@@ -20,7 +20,7 @@ return state;
       const actionsToTrack = {
-        'FORM_FILL_ENDED': {
+        FORM_FILL_ENDED: {
           eventName: 'user-form-input',
-          eventFields(state, action) {
-            const startTime = state.formFillStartTime;
-            const endTime = state.formFillEndTime;
+          eventFields(prevState, action) {
+            const startTime = prevState.formFillStartTime;
+            const endTime = action.time;
             const formName = action.formName;
@@ -33,5 +33,5 @@ return {
         },
-        'LOCATION_CHANGED': {
+        LOCATION_CHANGED: {
           eventName: 'page-view',
-          eventFields(state, action) {
+          eventFields() {
             return {};
@@ -43,3 +43,3 @@ },
           },
-        }
+        },
       };
@@ -60,3 +60,3 @@
       // dispatch a tracked action
-      store.dispatch({ type: 'FORM_FILL_ENDED', formName: 'sign-up' });
+      store.dispatch({ type: 'FORM_FILL_ENDED', formName: 'sign-up', time: 10 });
 
@@ -90,5 +90,5 @@ expect(window.dataLayer).toEqual([
       const actionsToTrack = {
-        'FORM_FILL_ENDED': {
+        FORM_FILL_ENDED: {
           eventName: 'user-form-input',
-        }
+        },
       };
@@ -95,0 +95,0 @@

test/typescript/event-definition.ts

@@ -7,3 +7,3 @@ import { EventDefinition } from '../../index.d';
   eventName: 'page-view',
-  eventFields: (state, action) => ({
+  eventFields: (prevState, action) => ({
     route: action.payload.location.pathname,
@@ -10,0 +10,0 @@ }),

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21282

increased by5.46%

Number of package files

24

increased by14.29%

Number of lines in readme file

62

increased by3.33%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

9

increased by125%

Lines of code

356

decreased by-0.28%

No dependency changes