Merge pull request #43 from stape-io/v2.1.38

Added select_item event

Author: plance

README.md

@@ -6,7 +6,7 @@
 
 **Tested up to:** 6.7.1
 
-**Stable tag:** 2.1.37
+**Stable tag:** 2.1.38
 
 **License:** GPLv2 or later
 
@@ -85,6 +85,9 @@ Yes. Follow this guide: [How to Setup Facebook Conversion API](https://stape.io/
 <details>
   <summary>Version 2 changelog</summary>
 
+### 2.1.38
+- Added "select_item" event
+
 ### 2.1.37
 - Fix: submit button
 

README.txt

@@ -3,7 +3,7 @@ Contributors: gtmserver,bukashk0zzz
 Tags: google tag manager, google tag manager server side, gtm, gtm server side, tag manager, tagmanager, analytics, google, serverside, server-side, gtag
 Requires at least: 5.2.0
 Tested up to: 6.8.0
-Stable tag: 2.1.37
+Stable tag: 2.1.38
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -67,6 +67,9 @@ Yes. <a href="https://stape.io/blog/how-to-set-up-facebook-conversion-api">How t
 
 == Changelog ==
 
+= 2.1.38 =
+* Added "select_item" event
+
 = 2.1.37 =
 * Fix: submit button
 

assets/js/javascript.js

@@ -35,9 +35,11 @@ jQuery( document ).ready(
 					return;
 				}
 
-				pluginGtmServerSide.pushAddToCart(
-					pluginGtmServerSide.removePrefixes( el.dataset )
-				);
+				let gtmData    = pluginGtmServerSide.getGtmItemData( el.dataset );
+				let customData = pluginGtmServerSide.getCustomItemData( el.dataset );
+
+				pluginGtmServerSide.pushAddToCart( gtmData );
+				pluginGtmServerSide.pushSelectItem( gtmData, customData );
 			}
 		);
 
@@ -54,9 +56,11 @@ jQuery( document ).ready(
 					return;
 				}
 
-				pluginGtmServerSide.pushAddToCart(
-					pluginGtmServerSide.removePrefixes( $el.data() )
-				);
+				let gtmData    = pluginGtmServerSide.getGtmItemData( $el.data() );
+				let customData = pluginGtmServerSide.getCustomItemData( $el.data() );
+
+				pluginGtmServerSide.pushAddToCart( gtmData );
+				pluginGtmServerSide.pushSelectItem( gtmData, customData );
 			}
 		);
 
@@ -98,7 +102,7 @@ jQuery( document ).ready(
 				}
 
 				pluginGtmServerSide.removeFromCart(
-					pluginGtmServerSide.removePrefixes( $thisbutton.data() )
+					pluginGtmServerSide.getGtmItemData( $thisbutton.data() )
 				);
 			}
 		);
@@ -117,7 +121,7 @@ jQuery( document ).ready(
 				}
 
 				pluginGtmServerSide.removeFromCart(
-					pluginGtmServerSide.removePrefixes( $el.data() )
+					pluginGtmServerSide.getGtmItemData( $el.data() )
 				);
 			}
 		);
@@ -129,7 +133,7 @@ var pluginGtmServerSide = {
 		var item = this.convertInputsToObject(
 			$elForm.find( '[name^=gtm_]' )
 		);
-		item     = this.removePrefixes( item );
+		item     = this.getGtmItemData( item );
 
 		var $elQty = $elForm.find( '[name=quantity]' );
 		if ( $elQty.length ) {
@@ -143,7 +147,7 @@ var pluginGtmServerSide = {
 		var item = this.convertInputsToObject(
 			$elForm.find( '[name^=gtm_]' )
 		);
-		item     = this.removePrefixes( item );
+		item     = this.getGtmItemData( item );
 
 		var $elQty = $elForm.find( '[name=quantity]' );
 		if ( $elQty.length ) {
@@ -242,7 +246,7 @@ var pluginGtmServerSide = {
 					}
 
 					if ( originalValue < currentValue ) {
-						var item         = $this.removePrefixes( elDataset.dataset );
+						var item         = $this.getGtmItemData( elDataset.dataset );
 						item['quantity'] = currentValue - originalValue;
 
 						$this.pushAddToCart( item );
@@ -253,22 +257,42 @@ var pluginGtmServerSide = {
 	},
 
 	/**
-	 * Remove field prefixes.
+	 * Return gtm custom data.
 	 *
 	 * @param object items List items.
 	 * @returns object
 	 */
-	removePrefixes: function ( items ) {
-		var item = {};
+	getGtmItemData: function ( items ) {
+		return this._getItemData( items, 'gtm_' );
+	},
+
+	/**
+	 * Return gtm custom data.
+	 *
+	 * @param object items List items.
+	 * @returns object
+	 */
+	getCustomItemData: function ( items ) {
+		return this._getItemData( items, 'custom_gtm_' );
+	},
+
+	/**
+	 * Return item data.
+	 *
+	 * @param object items List items.
+	 * @returns object
+	 */
+	_getItemData: function ( items, prefix ) {
+		var result = {};
 		for ( var key in items ) {
-			if ( 0 !== key.indexOf( 'gtm_' ) ) {
+			if ( 0 !== key.indexOf( prefix ) ) {
 				continue;
 			}
 
-			var itemKey     = key.replace( 'gtm_', '' )
-			item[ itemKey ] = items[key];
+			var itemKey       = key.replace( prefix, '' )
+			result[ itemKey ] = items[ key ];
 		}
-		return item;
+		return result;
 	},
 
 	/**
@@ -317,6 +341,39 @@ var pluginGtmServerSide = {
 	 * @param mixed item List items.
 	 */
 	pushAddToCart: function ( item ) {
+		this._pushToDataLayer( item, 'add_to_cart', 'product' )
+	},
+
+	/**
+	 * Push add_to_cart to dataLayer.
+	 *
+	 * @param object item List items.
+	 * @param object custom Custom data.
+	 */
+	pushSelectItem: function ( item, custom ) {
+		if ( custom?.pagetype ) { // phpcs:ignore WordPress.WhiteSpace.OperatorSpacing.NoSpaceBefore, WordPress.WhiteSpace.OperatorSpacing.NoSpaceAfter
+			this._pushToDataLayer(
+				item,
+				'select_item',
+				custom.pagetype,
+				{
+					collection_id:  custom?.collection_id,  // phpcs:ignore WordPress.WhiteSpace.OperatorSpacing.NoSpaceBefore, WordPress.WhiteSpace.OperatorSpacing.NoSpaceAfter
+					item_list_name: custom?.item_list_name, // phpcs:ignore WordPress.WhiteSpace.OperatorSpacing.NoSpaceBefore, WordPress.WhiteSpace.OperatorSpacing.NoSpaceAfter
+				}
+			)
+		}
+	},
+
+	/**
+	 * Push to dataLayer.
+	 *
+	 * @param object originalItem List items.
+	 * @param string event Event name.
+	 * @param string pagetype Page type name.
+	 * @param object customEcommerce Ecommerce data.
+	 */
+	_pushToDataLayer: function ( originalItem, event, pagetype, customEcommerce = {} ) {
+		item = Object.assign( {}, originalItem );
 		if ( item.item_id ) {
 			item = [ item ];
 		}
@@ -332,14 +389,16 @@ var pluginGtmServerSide = {
 			items.push( item_loop );
 		}
 
+		let eventDataEcommerce = {
+			'currency': varGtmServerSide.currency,
+			'value': value.toFixed( 2 ),
+			'items': items,
+		}
+
 		var eventData = {
-			'event':          this.getDataLayerEventName( 'add_to_cart' ),
-			'ecomm_pagetype': 'product',
-			'ecommerce': {
-				'currency': varGtmServerSide.currency,
-				'value': value.toFixed( 2 ),
-				'items': items,
-			},
+			'event':          this.getDataLayerEventName( event ),
+			'ecomm_pagetype': pagetype,
+			'ecommerce': Object.assign( {}, eventDataEcommerce, customEcommerce ),
 		};
 		if ( varGtmServerSide.user_data ) {
 			eventData.user_data = {};

gtm-server-side.php

@@ -7,10 +7,10 @@
  * @package           GTM_Server_Side
  *
  * @wordpress-plugin
- * Plugin Name:       GTM Server Side
+ * Plugin Name:       Stape Conversion Tracking
  * Plugin URI:        https://wordpress.org/plugins/gtm-server-side/
  * Description:       Enhance conversion tracking by implementing server-side tagging using server Google Tag Manager container. Effortlessly configure data layer events in web GTM, send webhooks, set up custom loader, and extend cookie lifetime.
- * Version:           2.1.37
+ * Version:           2.1.38
  * Author:            Stape
  * Author URI:        https://stape.io
  * License:           GPL-2.0+

includes/class-gtm-server-side-admin-settings.php

@@ -60,8 +60,8 @@ public function admin_init() {
 	 */
 	public function admin_menu() {
 		add_options_page(
-			__( 'GTM Server Side', 'gtm-server-side' ),
-			__( 'GTM Server Side', 'gtm-server-side' ),
+			__( 'Stape Conversion Tracking', 'gtm-server-side' ),
+			__( 'Stape Conversion Tracking', 'gtm-server-side' ),
 			'manage_options',
 			GTM_SERVER_SIDE_ADMIN_SLUG,
 			function() {