rubics-gtm-events

A utility function for Rubics themes regarding tracking in Google Tag Manager.

Install

$ git clone https://github.com/ludens-reklamebyra/rubics-gtm-events.git
$ npm install

Build

$ npm build

Test

In watch mode:

$ npm run test:dev

Single run

$ npm run test

Usage

Import and initialize.

import { googleEvents } from "@apriil-digital-oslo/rubics-gtm-events";

// Initialize your data layer.
const dataLayer = window.dataLayer || [];

// Initialize the tracker.
export const tracker = googleEvents(dataLayer);

Do a push to the data layer for GTM to read:

import { tracker } from "./my-relative-path-to-tracker-init";

tracker.track("myEventName", {
  randomKey1: "this is random data on the event",
  randomKey2: "More random data",
  // ...more of your own data
});

Need to add ecommerce data? We support it! And the best thing? It's strictly typed based on the event you choose.

NB: The event name for ecommerce tracking is predefined by the documentation of Google.

import { tracker } from "./my-relative-path-to-tracker-init";

tracker.trackEcommerce("add_to_cart", {
  currency: "NOK",
  value: 1000,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 10.01,
      quantity: 3,
    },
  ],
});

What ecommerce events do we support?

• view_item_list
• select_item
• view_item
• add_to_cart
• add_to_wishlist
• view_cart
• remove_from_cart
• begin_checkout
• add_shipping_info
• add_payment_info
• purchase
• refund
• view_promotion
• select_promotion

Want to join development?

1. Create a branch prefixed with either feature/my-branch-name, hotfix/my-branch-name or update/my-branch-name depending on your changes.
2. Create a pull request
3. We try to have 100% test coverage, so that will be important not to break in future PRs.
4. Await 🍖