How to use @shopgate/tracking-core - 10 common examples

/* eslint-disable extra-rules/no-single-line-objects */
import core from '@shopgate/tracking-core/core/Core';
import { mainSubject } from '@shopgate/pwa-common/store/middelwares/streams';
import { ROUTE_DID_ENTER, ROUTE_DID_LEAVE } from '@shopgate/pwa-common/constants/ActionTypes';
import { SCANNER_SCOPE_DEFAULT } from '@shopgate/pwa-core/constants/Scanner';
import { SCANNER_PATH, SUCCESS_HANDLE_SCANNER } from '@shopgate/pwa-common-commerce/scanner/constants';
import { scanActivated$, scanFail$, scanSuccess$ } from '../streams/scanner';
import * as helpers from '../helpers';
import subscription from './scanner';

const { createScannerEventData } = helpers;
const scannerEvents = core.getScannerEvents();

describe('Scanner subscriptions', () => {
  const mockedState = {};
  const subscribe = jest.fn();
  const getState = jest.fn().mockReturnValue(mockedState);
  const trackSpy = jest.spyOn(helpers, 'track');

  const format = 'QR_CODE';
  const payload = 'some.payload';

  beforeEach(() => {
    jest.clearAllMocks();
    subscription(subscribe);
  });

  it('should call subscribe as expected', () => {

this.register.pageview((data, raw) => {
      const formattedData = SgTrackingPlugin.formatData('viewContent', raw);
      if (!this.isMerchant || !formattedData.id) {
        formattedData.id = formattedData.type;
      }

      // Some more sanitization
      const specialTypes = [
        'cart',
        'favourite_list',
      ];
      if (specialTypes.indexOf(formattedData.type) > -1) {
        formattedData.id = this.isMerchant ? data.page.merchantUrl : data.page.shopgateUrl;
      }

      this.appHandler.viewContent(formattedData, this.cmdParams);

      return false;

const clientInformation = {
      type: get(clientInformationResponse, 'value.device.type', TYPE_PHONE),
      os: get(clientInformationResponse, 'value.device.os.platform', OS_ALL),
      state: getState(),
      services: get(clientInformationResponse, 'value.device.supportedAnalyticsServices', []),
      libVersion: get(clientInformationResponse, 'value.libVersion'),
      appVersion: get(clientInformationResponse, 'value.appVersion'),
    };

    // TODO: instantiate the UnifiedPlugin only if a native tracker is configured (FB, AppsFlyer)
    // eslint-disable-next-line no-new
    new UnifiedPlugin();

    if (appConfig.tracking.hasWebTrackingEngage) {
      // eslint-disable-next-line global-require
      const GaBase = require('@shopgate/tracking-core/plugins/trackers/GaBase').default;
      GaBase.createUniversal({
        shopNumber,
        codebaseVersion: get(clientInformationResponse, 'value.codebaseVersion'),
        config: {
          merchant: [],
          shopgate: {
            id: clientInformation.os === OS_ANDROID ?
              appConfig.webTrackingEngage.android :
              appConfig.webTrackingEngage.ios,
            useNetPrices: false,
          },
        },
      });
    }

    try {

type: get(clientInformationResponse, 'value.device.type', TYPE_PHONE),
      os: get(clientInformationResponse, 'value.device.os.platform', OS_ALL),
      state: getState(),
      services: get(clientInformationResponse, 'value.device.supportedAnalyticsServices', []),
      libVersion: get(clientInformationResponse, 'value.libVersion'),
      appVersion: get(clientInformationResponse, 'value.appVersion'),
    };

    // TODO: instantiate the UnifiedPlugin only if a native tracker is configured (FB, AppsFlyer)
    // eslint-disable-next-line no-new
    new UnifiedPlugin();

    if (appConfig.tracking.hasWebTrackingEngage) {
      // eslint-disable-next-line global-require
      const GaBase = require('@shopgate/tracking-core/plugins/trackers/GaBase').default;
      GaBase.createUniversal({
        shopNumber,
        codebaseVersion: get(clientInformationResponse, 'value.codebaseVersion'),
        config: {
          merchant: [],
          shopgate: {
            id: clientInformation.os === OS_ANDROID ?
              appConfig.webTrackingEngage.android :
              appConfig.webTrackingEngage.ios,
            useNetPrices: false,
          },
        },
      });
    }

    try {
      // eslint-disable-next-line global-require, import/no-dynamic-require

import { i18n } from '@shopgate/engage/core';
import {
  createScannerEventData,
  buildScannerUtmUrl,
  createCategoryData,
  createRootCategoryData,
  createPageviewData,
} from './index';

jest.mock('@shopgate/engage/core', () => ({
  i18n: {
    text: jest.fn(),
  },
}));

const scannerEvents = core.getScannerEvents();

describe('Tracking helpers', () => {
  const formatQrCode = 'QR_CODE';
  const defaultEvent = scannerEvents.SCAN_SUCCESS;

  describe('createScannerEventData()', () => {
    it('should create data when there was no user interaction', () => {
      const result = createScannerEventData({
        event: defaultEvent,
        type: formatQrCode,
        userInteraction: false,
      });

      expect(result).toEqual({
        eventAction: defaultEvent,
        userInteraction: false,

*/
          pluginInit(clientInformation);
        }
      });
    } catch (error) {
      logGroup('Tracking %c: Could not setup plugins', {
        error,
      }, '#ED0422');

      error.code = CODE_TRACKING;
      error.source = SOURCE_TRACKING;
      error.context = 'trackingPlugins';
      errorManager.queue(error);
    }

    core.registerFinished();
  });
}

export default function scanner(subscribe) {
  const events = core.getScannerEvents();

  subscribe(scanActivated$, ({ action, getState }) => {
    const { format } = action;
    track('qrScanner', createScannerEventData({
      event: events.SCAN_ACTIVATED,
      userInteraction: false,
      format,
    }), getState());
  });

  subscribe(scanSuccess$, ({ action, getState }) => {
    const { format, payload } = action;
    track('qrScanner', createScannerEventData({
      event: events.SCAN_SUCCESS,
      format,
      payload,

export const track = (eventName, data, state) => {
  if (typeof core.track[eventName] !== 'function') {
    logger.warn('Unknown tracking event:', eventName);
    return false;
  }

  try {
    core.track[eventName](data, undefined, undefined, state);
  } catch (e) {
    logger.error(e);
  }

  return core;
};

export const track = (eventName, data, state) => {
  if (typeof core.track[eventName] !== 'function') {
    logger.warn('Unknown tracking event:', eventName);
    return false;
  }

  try {
    core.track[eventName](data, undefined, undefined, state);
  } catch (e) {
    logger.error(e);
  }

  return core;
};

this.register.setCampaignWithUrl((data, raw) => {
      const finalData = {
        url: data.url,
      };

      if (!this.isMerchant) {
        const shopgateUrl = new SGLink(data.url);
        shopgateUrl.setUtmParams(data, raw);
        finalData.url = shopgateUrl.toString();
      }

      this.appHandler.setCampaignWithUrl(finalData, this.cmdParams);

      return false;
    });