project-booster-vue 10.22.8 → 10.22.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "10.22.8",
+  "version": "10.22.10",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/configurations/list/PbConfigurationsList.vue

@@ -44,10 +44,6 @@
               :text="`Réalisée le ${formatDate(configuration.creationDate)}`"
               :selected="configuration.selected"
               @click="emitConfigurationClickEvent(configuration)"
-              data-cdl-click-type="cdl_event"
-              :data-cdl-click-data="
-                formatEvent({ button_name: configuration.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
-              "
             />
           </div>
         </m-flexy-col>

package/src/components/pedagogy/PbPedagogy.vue

@@ -27,16 +27,6 @@
           :label="payload.viewModel.showFormLead.buttonLabel"
           class="pb-pedagogy__form-lead__button mc-button--full js-cdl"
           @click="saveFormLead(payload.viewModel.showFormLead)"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              {
-                button_name: payload.viewModel.showFormLead.buttonLabel,
-                button_location: stepLocation || '',
-              },
-              EventTypeEnum.BUTTON,
-            )
-          "
         />
       </form>
       <m-flex
@@ -53,16 +43,6 @@
           :label="payload.viewModel.downloadButton.label"
           class="pb-pedagogy__content-upload-button mc-button--full js-cdl"
           @click="handleButtonLinkClicked"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              {
-                button_name: payload.viewModel.downloadButton.label,
-                button_location: stepLocation || '',
-              },
-              EventTypeEnum.BUTTON,
-            )
-          "
         />
         <m-button
           v-for="action in payload.callToActions"
@@ -70,16 +50,6 @@
           :label="action.label"
           class="pb-pedagogy__content-action-button mc-button--full js-cdl"
           @click="handleValidateClicked(action)"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              {
-                button_name: action.label,
-                button_location: stepLocation || '',
-              },
-              EventTypeEnum.BUTTON,
-            )
-          "
         />
       </m-flex>
       <m-flex

package/src/components/products/PbProducts.vue

@@ -37,10 +37,6 @@
           v-for="action in payload.callToActions"
           :key="action.label"
           @click="callAction(action.action)"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON)
-          "
         />
       </m-flex>
     </m-flex>

package/src/components/question/PbQuestion.vue

@@ -118,21 +118,6 @@
                   @card-click="answer?.viewModel?.href ? '' : selectAnswer(payload.code, answer)"
                   @button-click="handleAnswerButtonClick"
                   @link-click="handleLinkClick(answer)"
-                  data-cdl-click-type="cdl_event"
-                  :data-cdl-click-data="
-                    formatEvent(
-                      {
-                        button_name: decorate(
-                          answers,
-                          runtimeOptions,
-                          answer?.viewModel?.title,
-                          payload.defaultDecoratorValue,
-                        ),
-                        button_location: stepLocation || '',
-                      },
-                      EventTypeEnum.BUTTON,
-                    )
-                  "
                 />
                 <m-button
                   v-else
@@ -224,8 +209,6 @@
             v-if="isValidateMultiselectButtonDisplayed()"
             class="pb-question__actions-buttons-button"
             :class="{ 'js-cdl': trackingStatus }"
-            data-cdl-click-type="cdl_event"
-            :data-cdl-click-data="eventData"
             size="m"
             size-from-l="l"
             :label="payload.multiSelect.actions.VALIDATE.label"
@@ -527,7 +510,6 @@ export default defineComponent({
     showNotification: false,
     showModal: false,
     EventTypeEnum,
-    eventData: {},
   }),
 
   computed: {
@@ -856,16 +838,6 @@ export default defineComponent({
           answers = answers.filter((item: any) => item !== answerCode);
         }
       }
-
-      this.eventData = formatEvent(
-        {
-          field_name: this.payload.viewModel?.label || '',
-          funnel_name: this.payload.viewModel.analytics?.funnel_name || '',
-          field_value: answers || '',
-          step_number: this.payload.viewModel?.stepNumber,
-        },
-        EventTypeEnum.SUBMIT,
-      );
     },
   },
 });

package/src/components/question/city-search/PbCitySearch.vue

@@ -97,16 +97,6 @@
           size="l"
           @click="handleFormValidation"
           :data-cerberus="sanitizeCerberusAttribut('PB-CITY-SEARCH', 'VALIDATE')"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              {
-                button_name: computedPayload.viewModel.actionLabel,
-                button_location: stepLocation || '',
-              },
-              EventTypeEnum.BUTTON,
-            )
-          "
         />
       </m-flex>
     </div>

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -57,16 +57,6 @@
           size="l"
           type="submit"
           :data-cerberus="sanitizeCerberusAttribut('PB-INCREMENTAL-AMOUNT', 'INPUT')"
-          data-cdl-click-type="cdl_event"
-          :data-cdl-click-data="
-            formatEvent(
-              {
-                button_name: computedPayload.viewModel.actionLabel,
-                button_location: stepLocation || '',
-              },
-              EventTypeEnum.BUTTON,
-            )
-          "
         />
       </m-flex>
     </form>

package/src/components/question/name-input/PbNameInput.vue

@@ -39,16 +39,6 @@
             size="l"
             @click="handleFormSubmit"
             :data-cerberus="sanitizeCerberusAttribut('PB-NAME-INPUT', 'BUTTON')"
-            data-cdl-click-type="cdl_event"
-            :data-cdl-click-data="
-              formatEvent(
-                {
-                  button_name: computedPayload.viewModel.actionLabel,
-                  button_location: stepLocation || '',
-                },
-                EventTypeEnum.BUTTON,
-              )
-            "
           />
         </m-flex>
       </m-flex>

package/src/components/rework/alert/MPbAlert.vue

@@ -31,17 +31,6 @@
               size="s"
               theme="bordered-primary-02"
               :class="{ 'js-cdl': trackingStatus }"
-              :data-cdl-click="
-                JSON.stringify([
-                  [
-                    'cdl_event',
-                    formatEvent(
-                      { button_name: options?.viewModel?.button?.label, button_location: stepLocation },
-                      EventTypeEnum.BUTTON,
-                    ),
-                  ],
-                ])
-              "
             />
           </template>
         </m-card>
@@ -54,6 +43,8 @@
       :step-number="stepNumber"
       :next-step-type="EventTypeEnum.BUTTON"
       :trackingStatus="trackingStatus"
+      :answers="answers"
+      :funnel-name="funnelName"
       @go-back="$emit('go-back')"
       @next-step="callAction(payload.viewModel.nextStep, [], emit)"
     />
@@ -82,10 +73,11 @@
 <script lang="ts" setup>
 import { MNotification, MButton, MCard, MModal } from '@mozaic-ds/vue-3';
 import { callAction } from '../services/navigate';
-import { ref } from 'vue';
+import { ref, PropType } from 'vue';
 import { useStore } from 'vuex';
 import { EventTypeEnum, formatEvent } from '../services/event';
 import MPbNavigation from '../navigation/MPbNavigation.vue';
+import { ScenarioStepAnswer } from '@/types/pb/Scenario';
 
 const emit = defineEmits(['go-back', 'step-completed']);
 const showModal = ref(false);
@@ -103,6 +95,13 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  /**
+   * The previous answers to inject
+   */
+  answers: {
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
+    default: () => new Map<string, ScenarioStepAnswer[]>(),
+  },
   /**
    * Show step location
    */
@@ -124,6 +123,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const handleCloseModal = () => {

package/src/components/rework/exit-options/MPbExitOptions.vue

@@ -40,17 +40,6 @@
           :data-cerberus="sanitizeCerberusAttribut('MPB-EXIT-OPTIONS', payload.viewModel.backButton.label)"
           icon="ArrowBack48"
           :class="{ 'js-cdl': trackingStatus }"
-          :data-cdl-click="
-            JSON.stringify([
-              [
-                'cdl_event',
-                formatEvent(
-                  { button_name: payload?.viewModel?.backButton?.label || 'Précédent', button_location: stepLocation },
-                  EventTypeEnum.BUTTON,
-                ),
-              ],
-            ])
-          "
         />
       </div>
 
@@ -66,17 +55,14 @@
           iconPosition="right"
           :class="{ 'js-cdl': trackingStatus }"
           :data-cdl-click="
-            JSON.stringify([
-              [
-                'cdl_event',
-                formatEvent(
-                  {
-                    button_name: payload?.viewModel?.nextStep?.label || 'Étape suivante',
-                    button_location: stepLocation,
-                  },
-                  EventTypeEnum.BUTTON,
-                ),
-              ],
+            formatEvent([
+              {
+                attributes: {
+                  button_name: condition.viewModel?.nextStep?.label || 'Étape suivante',
+                  button_location: payload.viewModel?.title,
+                },
+                type: EventTypeEnum.BUTTON,
+              },
             ])
           "
         />
@@ -85,12 +71,14 @@
 
     <m-pb-navigation
       v-if="payload?.viewModel?.nextStep"
+      :answers="answers"
       :payload="payload"
       :nextButtonAction="payload.viewModel.nextStep"
       :step-number="stepNumber"
       :next-step-type="EventTypeEnum.BUTTON"
       :trackingStatus="trackingStatus"
       :runtime-options="runtimeOptions"
+      :funnel-name="funnelName"
       @go-back="$emit('go-back')"
       @next-step="goToNavigation(payload.viewModel.nextStep)"
     />
@@ -158,6 +146,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const store = useStore();

package/src/components/rework/navigation/MPbNavigation.vue

@@ -8,14 +8,6 @@
         icon="ArrowBack48"
         :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', backButtonLabel)"
         :class="{ 'js-cdl': trackingStatus }"
-        :data-cdl-click="
-          JSON.stringify([
-            [
-              'cdl_event',
-              formatEvent({ button_name: backButtonLabel, button_location: stepLocation }, EventTypeEnum.BUTTON),
-            ],
-          ])
-        "
       />
     </div>
     <div class="m-pb-navigation__right column-full">
@@ -31,18 +23,7 @@
         :data-cerberus="sanitizeCerberusAttribut('MPB-NAVIGATION', nextButtonLabel)"
         :class="{ 'js-cdl': trackingStatus }"
         :disabled="disabledNextButton"
-        :data-cdl-click="
-          JSON.stringify([
-            [
-              'cdl_event',
-              formatEvent(
-                { button_name: nextButtonLabel, funnel_name: stepLocation, step_number: stepNumber },
-                nextStepType,
-              ),
-            ],
-            ['cdl_event', formatEvent({ step_number: stepNumber, field_value: answers }, EventTypeEnum.SUBMIT)],
-          ])
-        "
+        :data-cdl-click="cdlClickDate"
       />
     </div>
   </div>
@@ -136,6 +117,13 @@ const props = defineProps({
     type: String as () => EventTypeEnum,
     default: EventTypeEnum.SUBMIT,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const emitClickEvent = (nextStep: any) => {
@@ -160,6 +148,27 @@ const emitClickEvent = (nextStep: any) => {
     }
   }
 };
+
+const cdlClickDate = (): String => {
+  return formatEvent([
+    // {
+    //   attributes: {
+    //     field_name: props.payload?.viewModel?.label,
+    //     field_value: props.selectedAnswer,
+    //     funnel_name: props.funnelName,
+    //     step_number: props.stepNumber,
+    //   },
+    //   type: EventTypeEnum.FIELD,
+    // },
+    {
+      attributes: {
+        funnel_name: props.funnelName,
+        step_number: props.stepNumber,
+      },
+      type: EventTypeEnum.SUBMIT,
+    },
+  ]);
+};
 </script>
 
 <style lang="scss">

package/src/components/rework/products/MPbProducts.vue

@@ -35,14 +35,6 @@
           :theme="action.bordered ? 'bordered' : 'solid'"
           class="pb-products__container--button__ok"
           :class="{ 'js-cdl': trackingStatus }"
-          :data-cdl-click="
-            JSON.stringify([
-              [
-                'cdl_event',
-                formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON),
-              ],
-            ])
-          "
           :type="action.type"
           :label="action.label"
           icon-position="right"
@@ -61,7 +53,7 @@
 import { useStore } from 'vuex';
 import { MButton, MLink } from '@mozaic-ds/vue-3';
 import { ScenarioProduct, ScenarioStepAnswer } from '@/types/pb/Scenario';
-import { defineProps, PropType, onMounted, ref, Ref } from 'vue';
+import { defineProps, PropType, onMounted, ref, Ref, computed } from 'vue';
 import { PayloadAction } from '../types/genericPayload';
 import { formatEvent, EventTypeEnum } from '../services/event';
 
@@ -70,11 +62,7 @@ const emit = defineEmits(['go-back', 'step-completed']);
 const store = useStore();
 const metadata = store.getters['metaData/metaData'];
 const refProduct = store.getters['products/getRefProduct'];
-const product: Ref<ScenarioProduct> = ref({
-  photo: '',
-  designation: '',
-  value: '',
-});
+const product = computed(() => store.getters['products/getCurrentProduct']);
 
 const props = defineProps({
   /**
@@ -139,7 +127,6 @@ onMounted(() => {
       payload: props.payload.viewModel.defaultProduct,
       storeId: metadata && metadata.storeId ? metadata.storeId : '',
     });
-    product.value = store.getters['products/getCurrentProduct'];
   }
 });
 

package/src/components/rework/question/MPbQuestion.vue

@@ -81,25 +81,6 @@
                   @card-click="handleCardClick(answer, payload)"
                   @button-click="handleAnswerButtonClick"
                   @link-click="handleLinkClick(answer)"
-                  :data-cdl-click="
-                    JSON.stringify([
-                      [
-                        'cdl_event',
-                        formatEvent(
-                          {
-                            button_name: decorate(
-                              answers,
-                              runtimeOptions,
-                              answer?.viewModel?.title,
-                              payload?.defaultDecoratorValue,
-                            ),
-                            button_location: stepLocation,
-                          },
-                          EventTypeEnum.BUTTON,
-                        ),
-                      ],
-                    ])
-                  "
                 />
                 <m-button
                   v-else
@@ -256,20 +237,6 @@
               v-if="!payload.viewModel.hideBackButton"
               icon="ArrowBack48"
               :data-cerberus="sanitizeCerberusAttribut('MPB-QUESTION', 'Etape precedente')"
-              :data-cdl-click="
-                JSON.stringify([
-                  [
-                    'cdl_event',
-                    formatEvent(
-                      {
-                        button_name: 'Etape precedente',
-                        button_location: payload?.viewModel?.analytics?.funnel_name || '',
-                      },
-                      EventTypeEnum.BUTTON,
-                    ),
-                  ],
-                ])
-              "
             >
             </m-button>
           </div>
@@ -882,19 +849,28 @@ const updateCdlValues = () => {
     }
   }
 
-  eventData.value = JSON.stringify([
-    [
-      'cdl_event',
-      formatEvent(
-        {
-          funnel_name: props.payload?.viewModel?.analytics?.funnel_name || props.payload?.viewModel?.label || '',
-          step_number: props.stepNumber,
-        },
-        EventTypeEnum.SUBMIT,
-      ),
-    ],
-    ['cdl_event', formatEvent({ step_number: props.stepNumber, field_value: answers }, EventTypeEnum.SUBMIT)],
-  ]);
+  let analyticsEvents = [
+    {
+      attributes: {
+        funnel_name: props.payload?.viewModel?.analytics?.funnel_name || props.payload?.viewModel?.label || '',
+        step_number: props.stepNumber,
+      },
+      type: EventTypeEnum.SUBMIT,
+    },
+  ] as any[];
+  if (answers.length) {
+    analyticsEvents.push({
+      attributes: {
+        field_name: props.payload?.viewModel?.label,
+        field_value: answers,
+        funnel_name: props.payload?.viewModel?.analytics?.funnel_name || props.payload?.viewModel?.label || '',
+        step_number: props.stepNumber,
+      },
+      type: EventTypeEnum.FIELD,
+    });
+  }
+
+  eventData.value = formatEvent(analyticsEvents);
 };
 </script>
 

package/src/components/rework/question/city-search/MPbCitySearch.vue

@@ -76,6 +76,7 @@
         :trackingStatus="trackingStatus"
         :step-number="stepNumber"
         :runtime-options="runtimeOptions"
+        :funnel-name="funnelName"
         @go-back="$emit('go-back')"
         @next-step="nextStep"
       />
@@ -176,6 +177,13 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    /**
+     * Analytics funnel name
+     */
+    funnelName: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({

package/src/components/rework/question/configurations-import/MPbConfigurationsImport.vue

@@ -53,17 +53,6 @@
             :label="payload.viewModel.redirectLink.label"
             @click="callAction(payload.viewModel.redirectLink.nextStep)"
             theme="primary"
-            :data-cdl-click="
-              JSON.stringify([
-                [
-                  'cdl_event',
-                  formatEvent(
-                    { button_name: payload.viewModel?.redirectLink?.label, button_location: stepLocation },
-                    EventTypeEnum.BUTTON,
-                  ),
-                ],
-              ])
-            "
           ></m-link>
         </div>
 
@@ -73,6 +62,7 @@
           :trackingStatus="trackingStatus"
           :step-number="stepNumber"
           :runtime-options="runtimeOptions"
+          :funnel-name="funnelName"
           @go-back="$emit('go-back')"
           @next-step="callAction(payload?.viewModel?.nextStep)"
         />
@@ -197,6 +187,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const store = useStore();

package/src/components/rework/question/dimensions-input/MPbDimensionsInput.vue

@@ -55,6 +55,7 @@
           :trackingStatus="trackingStatus"
           :step-number="stepNumber"
           :runtime-options="runtimeOptions"
+          :funnel-name="funnelName"
           @go-back="$emit('go-back')"
           @next-step="handleFormSubmit"
         />
@@ -173,6 +174,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 // Logic

package/src/components/rework/question/incremental-amount-input/MPbIncrementalAmountInput.vue

@@ -25,6 +25,7 @@
         :step-number="stepNumber"
         :answers="answers"
         :runtime-options="runtimeOptions"
+        :funnel-name="funnelName"
         @go-back="$emit('go-back')"
         @next-step="nextStep"
       />
@@ -129,6 +130,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const $emit = defineEmits(['go-back', 'step-completed']);

package/src/components/rework/question/list-select/MPbListSelect.vue

@@ -34,6 +34,7 @@
         :trackingStatus="trackingStatus"
         :step-number="stepNumber"
         :runtime-options="runtimeOptions"
+        :funnel-name="funnelName"
         @go-back="$emit('go-back')"
         @next-step="submitAnswers"
       />
@@ -42,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, Ref, defineProps, defineEmits } from 'vue';
+import { ref, computed, onMounted, Ref, defineProps, defineEmits, PropType } from 'vue';
 import PbItemsList from '../../../items/PbItemsList.vue';
 import { sortAnswers } from '../sortAnswers';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
@@ -68,7 +69,7 @@ const props = defineProps({
     default: 'step-completed',
   },
   answers: {
-    type: Object,
+    type: Object as PropType<Map<string, ScenarioStepAnswer[]>>,
     default: () => new Map<string, ScenarioStepAnswer[]>(),
   },
   stickyBottomOffset: {
@@ -83,6 +84,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 // Answers

package/src/components/rework/question/space-input/MPbSpaceInput.vue

@@ -68,6 +68,7 @@
           :trackingStatus="true"
           :step-number="stepNumber"
           :runtime-options="runtimeOptions"
+          :funnel-name="funnelName"
           @go-back="$emit('go-back')"
           @next-step="nextStep"
         />
@@ -176,6 +177,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const componentId = uuidv4();

package/src/components/rework/question/upload-document/MPbUploadDocument.vue

@@ -91,6 +91,7 @@
       :trackingStatus="true"
       :step-number="stepNumber"
       :runtime-options="runtimeOptions"
+      :funnel-name="funnelName"
       @go-back="$emit('go-back')"
       @next-step="validMultiSelect"
     />
@@ -197,6 +198,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /**
+   * Analytics funnel name
+   */
+  funnelName: {
+    type: String,
+    default: '',
+  },
 });
 
 const store = useStore();

package/src/components/rework/restitution/MPbRestitutionList.vue

@@ -111,14 +111,6 @@
             theme="bordered-neutral"
             @click.prevent="handleShowDialog"
             :class="{ 'js-cdl': trackingStatus }"
-            :data-cdl-click="
-              JSON.stringify([
-                [
-                  'cdl_event',
-                  formatEvent({ button_name: 'Fermer', button_location: stepLocation }, EventTypeEnum.BUTTON),
-                ],
-              ])
-            "
           >
           </m-button>
         </m-flex>

package/src/components/rework/services/event.ts

@@ -29,60 +29,62 @@ export interface FormatEventInterface {
 
 /**
  * Format event click, field
- * @param param0
- * @param type
+ * @param events
  * @returns
  */
 export const formatEvent = (
-  {
-    button_name,
-    button_location,
-    funnel_name,
-    field_name,
-    field_value,
-    step_name,
-    step_number,
-    button_type,
-  }: FormatEventInterface,
-  type: EventTypeEnum,
+  events:
+    | { attributes: FormatEventInterface; type: EventTypeEnum }
+    | { attributes: FormatEventInterface; type: EventTypeEnum }[],
 ): string => {
-  let event_data = {};
-
-  switch (type) {
-    case EventTypeEnum.BUTTON:
-      event_data = {
-        button_name,
-        button_location,
-        button_type,
-      };
-      break;
-    case EventTypeEnum.FIELD:
-      event_data = {
-        field_name,
-        field_value,
-        funnel_name,
-      };
-      break;
-    case EventTypeEnum.DISPLAY:
-      event_data = {
-        funnel_name,
-        step_name,
-        step_number,
-      };
-      break;
-    case EventTypeEnum.SUBMIT:
-      event_data = {
-        funnel_name,
-        step_name,
-        step_number,
-      };
-      break;
+  if (!Array.isArray(events)) {
+    events = [events];
   }
 
-  return JSON.stringify({
-    event_name: getEventType(type),
-    event_data,
+  let events_data = [] as any[];
+  events.forEach((event) => {
+    let data = {};
+    switch (event.type) {
+      case EventTypeEnum.DISPLAY:
+        data = {
+          step_name: event.attributes.step_name,
+          funnel_name: event.attributes.funnel_name,
+          step_number: event.attributes.step_number,
+        };
+        break;
+      case EventTypeEnum.BUTTON:
+        data = {
+          button_name: event.attributes.button_name,
+          button_location: event.attributes.button_location,
+          button_type: event.attributes.button_type,
+        };
+        break;
+      case EventTypeEnum.FIELD:
+        data = {
+          field_name: event.attributes.field_name,
+          field_value: event.attributes.field_value,
+          funnel_name: event.attributes.funnel_name,
+          step_number: event.attributes.step_number,
+        };
+        break;
+      case EventTypeEnum.SUBMIT:
+        data = {
+          funnel_name: event.attributes.funnel_name,
+          step_number: event.attributes.step_number,
+        };
+        break;
+    }
+
+    events_data.push([
+      'cdl_event',
+      {
+        event_name: getEventType(event.type),
+        event_data: data,
+      },
+    ]);
   });
+
+  return JSON.stringify(events_data);
 };
 
 /**

package/src/components/scenario/PbScenario.vue

@@ -71,6 +71,7 @@
             :step-location="state.currentStep?.slots?.beforeContent?.label || ''"
             :tracking-status="isTrackingEnabled"
             :step-number="state.history.stepIndex - 1"
+            :funnel-name="funnelName"
             @step-completed="handleStepCompleted"
             @update-selected="handleSemiUpdateSelected"
             @redirection="handleRedirection"
@@ -271,6 +272,7 @@ export default defineComponent({
 
     const scenarios = new Map<string, ScenarioStep>(Object.entries(props.scenarios));
     const isTrackingEnabled = Object.entries(props.scenarios)[0][1].meta?.webAnalytics?.tracking || false;
+    const funnelName = Object.entries(props.scenarios)[0][1].meta?.webAnalytics?.funnel_name || '';
     const state: Ref<ScenarioState> = ref({
       answers: new Map<string, ScenarioStepAnswer[]>(Object.entries(props.runtimeOptions?.answersToInject ?? {})),
       stepsToResume: [],
@@ -763,6 +765,7 @@ export default defineComponent({
       handleClickSaveItem,
       handleGoBack,
       isTrackingEnabled,
+      funnelName,
     };
   },
 });

package/src/components/trezor/PbTrezor.vue

@@ -230,14 +230,6 @@
             @click.prevent="callAction(action)"
             :data-cerberus="sanitizeCerberusAttribut('PB-TREZOR', 'SENDFORM')"
             :disabled="isSubmitDisabled"
-            :data-cdl-click="
-              JSON.stringify([
-                [
-                  'cdl_event',
-                  formatEvent({ button_name: action.label, button_location: stepLocation }, EventTypeEnum.BUTTON),
-                ],
-              ])
-            "
           />
         </m-flex>
       </div>

package/src/components/warning-message/PbWarningMessage.vue

@@ -68,18 +68,6 @@
           :key="action.label"
           @click="callAction(action.action)"
           :data-cerberus="sanitizeCerberusAttribut('PB-WARNING-BUTTON', action.action.code)"
-          :data-cdl-click="
-            JSON.stringify([
-              'cdl_event',
-              formatEvent(
-                {
-                  button_name: action.label,
-                  button_location: stepLocation || '',
-                },
-                EventTypeEnum.BUTTON,
-              ),
-            ])
-          "
         />
       </m-flex>
     </div>