No Padding Module

    redux-gtm
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    Deprecation Notice

    ReduxGTM has been deprecated in favour of Redux Beacon.

    A simple migration guide can be found here.


    Google Tag Manager integration for Redux and ngrx/store

    license npm version CircleCI

    npm install --save redux-gtm

    logger-ext


    Quick Start

    What You Need First
    How it Works

    In a nutshell, ReduxGTM provides a way for mapping your redux actions to custom Gooogle Tag Manager events. The first step is to create an EventDefinitionsMap which maps your action types to an EventDefinition:

    const eventDefinitionsMap = {
      'SOME_ACTION_TYPE': {
        eventName: 'some-custom-gtm-event',
        eventFields: (state, action) => ({
          'someEventVariable': action.payload
        }),
      }
    };

    The object mapped to SOME_ACTION_TYPE is called an EventDefinition. ReduxGTM uses EventDefinitions to generate a custom GTM events. The EventDefinition above will produce an event with following shape:

    {
      'event': 'some-custom-gtm-event',
      'someEventVariable': ... // the value stored in action.payload
    }

    Once we've got an event definitions map, all we have to do is create the middleware, and apply it to our store.

    import reducer from './reducer';
    import { createStore, applyMiddleware } from 'redux';
     
    // Import ReduxGTM
    import { createMiddleware } from 'redux-gtm';
     
    // The event definitions map prepared earlier
    const eventDefinitionsMap = {
      'SOME_ACTION_TYPE': {
        eventName: 'some-custom-gtm-event',
        eventFields: (state, action) => ({
          'someEventVariable': action.payload
        }),
      }
    };
     
    // Create the ReduxGTM middleware
    const middleware = createMiddleware(eventDefinitionsMap);
     
    // Apply the middleware when creating your Redux store
    const store = createStore(reducer, applyMiddleware(analyticsMiddleware));

    Now, whenever your application dispatches SOME_ACTION_TYPE, ReduxGTM will create the associated custom event and push it to the data layer.

    What Else Can You Do?
    • Use ReduxGTM in React Native and Cordova apps
    • Track analytics events even if one of your users loses connection (offline events tracking)
    • Use one of our starter containers to get up and running in GTM with almost zero configuration
    • Provide multiple event definitions for a single Redux action

    Documentation

    The official docs contain tutorials, examples, and a comprehensive API reference for the latest npm version.

    License

    This project is licensed under the MIT License.

    Install

    npm i redux-gtm

    DownloadsWeekly Downloads

    23

    Version

    0.3.2

    License

    MIT

    Last publish

    Collaborators

    • ttmarek