MC-35104: Tracking Page Builder content type

- WIP extract hide/show visibility action

Author: eliseacornejo

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -302,6 +302,7 @@ export default class Preview implements PreviewInterface {
     public onOptionVisibilityToggle(): void {
         const display = this.contentType.dataStore.get<boolean>("display");
         this.contentType.dataStore.set("display", !display);
+        this.dispatchContentTypeVisibilityEvents(this.contentType, !display);
     }
 
     /**
@@ -488,6 +489,19 @@ export default class Preview implements PreviewInterface {
         events.trigger(originalContentType.config.name + ":duplicateAfter", duplicateEventParams);
     }
 
+    protected dispatchContentTypeVisibilityEvents(
+        originalContentType: ContentTypeInterface | ContentTypeCollectionInterface,
+        visibility: boolean,
+    ) {
+        const visibilityEventParams = {
+            originalContentType,
+            visibility,
+        };
+
+        events.trigger("contentType:visibilityAfter", visibilityEventParams);
+        events.trigger(originalContentType.config.name + ":visibilityAfter", visibilityEventParams);
+    }
+
     /**
      * Bind events
      */

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/preview.ts

@@ -9,37 +9,35 @@
  * @param {String} name
  * @param {Array} args
  */
-define(['underscore'],
-    function (_, name, args) {
-        'use strict';
-        var EventBuilder = {};
-        EventBuilder.build = function(name,args)
-        {
+define(['underscore'], function (_, name, args) {
+    'use strict';
+    return {
+        build: function (name, args) {
             var arrayName = name.split(':'),
                 arrayNameObject,
                 action = '',
-                eventAttributes = {},
-                hasVisibilityChanged;
+                eventAttributes = {};
 
             if (_.isUndefined(args)) {
                 return;
             }
-            if (arrayName.length === 3) {
-                arrayNameObject = arrayName[1];
-                //action = hasVisibilityChanged(args[arrayNameObject]) ? 'hide/show' : '';
-                eventAttributes =
-                    !_.isUndefined(args[arrayNameObject]) &&
-                    !_.isUndefined(args[arrayNameObject].config) ?
-                        args[arrayNameObject].config : {};
-                return eventAttributes;
-            } else if (arrayName.length === 2) {
+            // if (arrayName.length === 3) {
+            //     arrayNameObject = arrayName[1];
+            //     eventAttributes =
+            //         !_.isUndefined(args[arrayNameObject]) &&
+            //         !_.isUndefined(args[arrayNameObject].config) ?
+            //             args[arrayNameObject].config : {};
+            //     eventAttributes.action = action;
+            //     return eventAttributes;
+            // } else if (arrayName.length === 2) {
                 switch (arrayName[arrayName.length - 1]) {
                     case 'duplicateAfter':
                         action = 'duplicate';
                         eventAttributes =
                             !_.isUndefined(args.originalContentType) &&
                             !_.isUndefined(args.originalContentType.config) ?
                                 args.originalContentType.config : {};
+                        eventAttributes.action = action;
                         return eventAttributes;
 
                     case 'removeAfter':
@@ -54,41 +52,20 @@ define(['underscore'],
                         action = 'edit';
                         break;
 
+                    case 'visibilityAfter':
+                        action = args.visibility ? 'show' : 'hide';
+                        break;
+
                     default:
                         break;
                 }
 
                 eventAttributes = !_.isUndefined(args.contentType) &&
-                       !_.isUndefined(args.contentType.config) ?
-                       args.contentType.config : {};
+                !_.isUndefined(args.contentType.config) ?
+                    args.contentType.config : {};
+                eventAttributes.action = action;
                 return eventAttributes;
             }
         }
-        return EventBuilder;
-    });
-
-
-/**
- * Returns true when visibility has changed from previousState to state
- *
- * @param {Object} objectWrapper
- */
-/*hasVisibilityChanged = function (objectWrapper) {
-    var state,
-        previousState;
-
-    if (!_.isUndefined(objectWrapper) &&
-        !_.isUndefined(objectWrapper).dataStore
-    ) {
-        previousState = !_.isUndefined(objectWrapper.dataStore.previousState) ?
-            objectWrapper.dataStore.previousState.display : '';
-        state = !_.isUndefined(objectWrapper.dataStore.state) ?
-            objectWrapper.dataStore.state.display : '';
-
-        if (previousState !== state && previousState !== '' && state !== '') {
-            return true;
-        }
-    }
-
-    return false;
-};*/
+    //}
+});

app/code/Magento/PageBuilderAdminAnalytics/view/adminhtml/web/js/page-builder/event-builder.js

@@ -9,7 +9,6 @@ define(['underscore', "Magento_PageBuilderAdminAnalytics/js/page-builder/event-b
 
     return function (target) {
         var originalTarget = target.trigger,
-            action = '',
             event,
             isAdminAnalyticsEnabled;
 
@@ -34,25 +33,27 @@ define(['underscore', "Magento_PageBuilderAdminAnalytics/js/page-builder/event-b
                 window._satellite.track('page');
             }
 
-            var eventAttributes = EventBuilder.build(name, args);
-
-            if (action !== '' && !_.isEmpty(eventAttributes)) {
-                event = {
-                    element: eventAttributes.label,
-                    type: eventAttributes.name,
-                    action: action,
-                    widget: {
-                        name: eventAttributes.form,
-                        type: eventAttributes['menu_section']
-                    },
-                    feature: 'page-builder-tracker'
-                };
-
-                if (isAdminAnalyticsEnabled && !_.isUndefined(window.digitalData.event)) {
+            var event = EventBuilder.build(name, args);
+
+            // if (eventAttributes.action !== '' && !_.isEmpty(eventAttributes)) {
+            //     event = {
+            //         element: eventAttributes.label,
+            //         type: eventAttributes.name,
+            //         action: eventAttributes.action,
+            //         widget: {
+            //             name: eventAttributes.form,
+            //             type: eventAttributes['menu_section']
+            //         },
+            //         feature: 'page-builder-tracker'
+            //     };
+
+                if (isAdminAnalyticsEnabled &&
+                    !_.isUndefined(window.digitalData.event) &&
+                    !_.isEmpty(event)) {
                     window.digitalData.event.push(event);
                     window._satellite.track('event');
                 }
-            }
+            //}
         };
 
         return target;