Google Tag Manager Impressions

/**
 * @module components/Cards/Product
 */

import React from 'react';
import {
  compose,
  defaultProps,
  mapProps,
  setDisplayName,
  withHandlers,
  withProps,
  withPropsOnChange,
  withHandlers,
} from 'recompose';
import pure from 'helpers/pure';

import styles from 'components/Cards/Product/styles.css';
import view from 'components/Cards/Product/view';
import withTheme from 'helpers/withTheme';

const sendFindifyClickEvent = (list, item, config, index) => new Promise(resolve =>
  window.dataLayer.push({
  eventCallback: resolve,
  event: "gaEvent",
  eventCategory: "Ecommerce",
  eventAction: "Product Click",
  ecommerce: {
    click: {
      actionField: { list },
        products: [{
          currencyCode: config.getIn(['currency', 'code']),
          name: item.get('title'), // Name or ID is required.
          id: item.getIn(['sku', 0]),
          price: item.getIn(['price', 0]),
          brand: item.get('brand'),
          category: item.getIn(['category', 0, 'category1']),
          list: list,
          position: index + 1
        }]
      }
    }
  })
)

const ProductCard: any = compose(
  pure,
  setDisplayName('ProductCard'),
  withTheme(styles),
  withHandlers({
    onClick: ({ item, config, index }) => async (event) => {
      // Get the list name from DOM node what widget belong to
      const list = config.get('node').dataset.list;
      
      // Send the event and wait for callback
      await sendFindifyClickEvent(list, item, config, index);
      
      // Call the original event
      item.onClick(event);
    }
  })
)(view);

export default ProductCard;

// ...
const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  onClick // <-- Get the handler from props
}: any) => (
  <a
    onClick={onClick} // <-- Change handler to what we created above
    href={item.get('product_url')}
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
)

// ...