@geins/ralph-module-gtm - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

lib/module.js

 const path = require('path')
 
-// Import Mixins to export
-// const { default: MyMixin } = require('./components/mixins/MyMixin')
-
-// Change this to match your module name
 const moduleName = 'ralphGTM'
@@ -11,2 +7,5 @@
   name: moduleName,
+  debug: false,
+  enabled: true,
+  gtm: {},
   itemId: 'productId',
@@ -23,2 +22,6 @@ propOverrides: []
 
+  if (!options.enabled) {
+    return false
+  }
+
   this.addTemplate({
@@ -36,32 +39,6 @@ src: path.resolve(__dirname, 'module.utils.js'),
 
-  // Add Mixins
-  // this.nuxt.hook('vue:extend', Component => {
-  //   Component.mixin(MyMixin)
-  // })
+  this.requireModule(['@nuxtjs/gtm', options.gtm])
 
-  /*
-  this.nuxt.hook('components:dirs', (dirs) => {
-    dirs.push({
-      path: path.resolve(__dirname, 'components'),      
-      prefix: 'my',
-      extensions: ['vue']
-    });
-  });
-  */
-
-  /*
-  this.nuxt.hook('components:dirs', (dirs) => {
-    dirs.push({
-      path: path.resolve(__dirname, 'components'),      
-      prefix: 'my',
-      extensions: ['js']
-    });
-  });
-*/
-
   return true
 }
 module.exports.meta = require('../package.json')
-
-// Export Mixins
-// module.exports.MyMixin = MyMixin

lib/module.plugin.js

@@ -0,1 +1,2 @@
+import CryptoJS from 'crypto-js'
 const moduleOptions = `<%= JSON.stringify(options) %>`
@@ -7,10 +8,27 @@
 
-  // Register Vuex store module for this module
-  // app.store.registerModule(options.name, {
-  //   state: () => ({}),
-  //   mutations: {},
-  //   actions: {},
-  //   getters: {}
-  // })
+  let productImpressions = []
+  let ecommerce = {}
 
+  // Function to push product impressions to the data layer in batches
+  const pushProductImpressions = () => {
+    if (productImpressions.length > 0) {
+      ecommerce.items = productImpressions
+      app.$gtm.push({
+        event: 'view_item_list',
+        ecommerce
+      })
+
+      // Clear the product impressions array
+      productImpressions = []
+    }
+  }
+
+  if (process.client) {
+    window.onNuxtReady(() => {
+      window.addEventListener('beforeunload', () => {
+        pushProductImpressions()
+      })
+    })
+  }
+
   const getSalesCategory = discountPercent => {
@@ -76,9 +94,8 @@ if (discountPercent >= 0 && discountPercent <= 5) {
       const eventData = mutation.payload.data
-      const currency = state.channel.currentCurrency
-      let ecommerce = {
-        currency
-      }
+      ecommerce.currency = state.channel.currentCurrency
+
       let product = eventData.product ?? null
 
       // ADD TO CART / REMOVE FROM CART
+      // --------------------------------
       if (eventType.includes('cart')) {
@@ -96,2 +113,119 @@ ecommerce.items = [getItem(product, eventData.item)]
 
+      // PRODUCT IMPRESSIONS / VIEW ITEM LIST
+      // ------------------------------------
+      if (eventType === 'product:impression') {
+        const item = getItem(product, null, eventData.index)
+        productImpressions.push(item)
+
+        // Check if the batch size limit is reached and push group
+        if (productImpressions.length >= 4) {
+          pushProductImpressions()
+        }
+      } else {
+        // If other event, push leftovers if any
+        pushProductImpressions()
+      }
+
+      // PRODUCT CLICK / SELECT ITEM
+      // ---------------------------
+      if (eventType === 'product:click') {
+        ecommerce.items = [getItem(product, null, eventData.index)]
+
+        app.$gtm.push({
+          event: 'select_item',
+          ecommerce
+        })
+      }
+
+      // PRODUCT DETAIL IMPRESSION / VIEW ITEM
+      // -------------------------------------
+      if (eventType === 'product-detail:impression') {
+        ecommerce.items = [getItem(product)]
+
+        app.$gtm.push({
+          event: 'view_item',
+          ecommerce
+        })
+      }
+
+      // CHECKOUT IMPRESSION / BEGIN CHECKOUT
+      // ------------------------------------
+      if (eventType === 'checkout:impression') {
+        const cartItems =
+          state?.cart?.data?.items?.map(item => {
+            return getItem(item.product, item)
+          }) || []
+
+        ecommerce.items = cartItems
+
+        app.$gtm.push({
+          event: 'begin_checkout',
+          ecommerce
+        })
+      }
+
+      // PAGE IMPRESSION
+      // ---------------
+      if (eventType === 'page:impression') {
+        if (eventData.isSSR) {
+          app.$gtm.push({
+            event: 'original_location',
+            original_location: eventData.requestUrl
+          })
+        } else {
+          app.$gtm.push({
+            event: 'virtual_page_view',
+            pagePath: eventData.route.fullPath
+          })
+        }
+        app.$gtm.push({
+          event: 'page_data',
+          page_type: eventData.route?.meta[0]?.pageType
+        })
+      }
+
+      // ADD FAVORITE
+      // ------------
+      if (eventType === 'favorite:add') {
+        const item = getItem(product)
+        ecommerce.items = [item]
+
+        app.$gtm.push({
+          event: 'add_to_wishlist',
+          ecommerce
+        })
+      }
+
+      // TRANSACTION / PURCHASE
+      // ----------------------
+      if (eventType === 'checkout:purchase') {
+        ecommerce = {
+          transaction_id: eventData.orderId,
+          currency: eventData.order?.currency,
+          // affiliation: affiliation,
+          value: eventData.orderCart?.summary.total.sellingPriceIncVat,
+          tax: eventData.orderCart?.summary.total.vat,
+          shipping: eventData.orderCart?.summary.shipping.feeIncVat,
+          coupon: eventData.orderCart?.promoCode,
+          userId: CryptoJS.SHA256(eventData.order?.email).toString()
+          // nth_purchase: 'purchases'
+        }
+
+        const cartItems =
+          eventData.orderCart?.items?.map(item => {
+            return getItem(item.product, item)
+          }) || []
+
+        ecommerce.items = cartItems
+
+        app.$gtm.push({
+          event: 'purchase',
+          ecommerce
+        })
+      }
+
+      // All events sent by ralph since version 19.3.0
+      // ------------------------------------------------
+      // `product:impression` - data payload: `{ product, page, index, pageSize }` (changed payload)
+
       // All events sent by ralph since version 19.1.0
@@ -98,0 +232,0 @@ // ------------------------------------------------

package.json

 {
   "name": "@geins/ralph-module-gtm",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Geins module for Google Tag Manager",
@@ -36,4 +36,6 @@ "author": {
   "dependencies": {
-    "consola": "^2.3.2"
+    "@nuxtjs/gtm": "^2.4.0",
+    "consola": "^2.3.2",
+    "crypto-js": "^4.1.1"
   }
 }

README.md

@@ -1,8 +0,23 @@
-# @geins/ralph-module-gtm
+[![NPM Package][npm]][npm-url]
+[![NPM Downloads][npm-downloads-per-month]][npm-trends]
 
-GTM module for Ralph
+# Ralph Module for GTM
 
+GTM module for Ralph that will push the following events to the datalayer:
+
+- `add_to_cart` - One or more products are added to the cart
+- `remove_from_cart` - One or more products are removed from the cart
+- `view_item` - A product page is viewed
+- `view_item_list` - A product in a list is scrolled into view
+- `select_item` - A product in a list is clicked
+- `begin_checkout` - The checkout page has been entered
+- `purchase` - A purchase has been made
+- `original_location` - The page where the user enters the site
+- `virtual_page_view` - A new navigation has been made
+- `page_data` - A page has been loaded
+- `add_to_wishlist` - A product has been added to the wishlist
+
 ## Requirements
 
-This package require Nuxt 2 to be installed in your project. It also requires @ralph/ralph-ui 19.3.0 or higher.
+This package require Nuxt 2 to be installed in your project. It also requires @ralph/ralph-ui 19.4.0 or higher.
 
@@ -17,4 +32,29 @@ ## Installation
 
-## Development
+Once installed, you can add the module to your Nuxt 2 app by updating the modules array in the nuxt.config.js file. You can then configure the module by adding options to the `@geins/ralph-module-gtm` object:
 
+```javascript
+// nuxt.config.js
+
+module.exports = {
+  modules: [
+    [
+      '@geins/ralph-module-gtm',
+      // Configuration defaults for the module
+      {
+        // Set to true to enable debug mode
+        debug: false,
+        // Set to false to disable the module
+        enabled: true,
+        // Settings for the GTM module, see https://github.com/nuxt-community/gtm-module for more information
+        gtm: {},
+        // What to use as the item_id for the product, for example 'productId' or 'articleNumber'
+        itemId: 'productId',
+        // If you want to override some properties of the product, you can do so here , for example: [{ override: 'price_campaign', name: 'green_price' }]
+        propOverrides: []
+      }
+    ]
+  ]
+}
+```
+
 ## License
@@ -25,1 +65,8 @@
 ## Note
+
+If you are already using the `@nuxtjs/gtm` module, you should uninstall it and use this module instead, which will include the `@nuxtjs/gtm` module as a dependency. If you are using the internal GTM events of Ralph, you should disable them by setting `useExternalGtm` to true in the `publicRuntimeConfig` of you nuxt.config.js file.
+
+[npm]: https://img.shields.io/npm/v/@geins/ralph-module-gtm
+[npm-url]: https://www.npmjs.com/package/@geins/ralph-module-gtm
+[npm-downloads-per-month]: https://img.shields.io/npm/dm/@geins/ralph-module-gtm.svg
+[npm-trends]: https://npmtrends.com/@geins/ralph-module-gtm

No alert changes

Improved metrics

Total package byte prevSize

19920

increased by50.36%

Number of package files

22

increased by4.76%

Lines of code

359

increased by34.96%

Number of lines in readme file

71

increased by195.83%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Added@nuxtjs/gtm@^2.4.0

• + Addedcrypto-js@^4.1.1

• + Added@nuxtjs/gtm@2.4.0(transitive)

• + Addedansi-styles@4.3.0(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcrypto-js@4.2.0(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedsemver@7.7.1(transitive)

• + Addedsupports-color@7.2.0(transitive)