[TECH] Supprimer des événements Matomo inutiles de la vocalisation de…

…s épreuves (PIX-15187). #10564
1024pix · Nov 25, 2024 · a9cf40f · a9cf40f
2 parents c0994b5 + 7877298
commit a9cf40f
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 16 deletions.
diff --git a/mon-pix/app/components/assessment-banner.hbs b/mon-pix/app/components/assessment-banner.hbs
@@ -13,7 +13,7 @@
         <PixTooltip class="assessment-banner__text-to-speech-toggle" @position="left" @isInline={{true}}>
           <:triggerElement>
             <button type="button" aria-label={{this.textToSpeechTooltipText}} {{on "click" @toggleTextToSpeech}}>
-              <FaIcon @icon={{this.textToSpeechIcon}} />
+              <PixIcon @name={{if @isTextToSpeechActivated "volumeOn" "volumeOff"}} />
             </button>
           </:triggerElement>
           <:tooltip>

diff --git a/mon-pix/app/components/assessment-banner.js b/mon-pix/app/components/assessment-banner.js
@@ -9,10 +9,6 @@ export default class AssessmentBanner extends Component {
 
   @tracked showClosingModal = false;
 
-  get textToSpeechIcon() {
-    return this.args.isTextToSpeechActivated ? 'volume-high' : 'volume-xmark';
-  }
-
   get textToSpeechTooltipText() {
     return this.args.isTextToSpeechActivated
       ? this.intl.t('pages.challenge.statement.text-to-speech.deactivate')

diff --git a/mon-pix/app/components/challenge-statement.hbs b/mon-pix/app/components/challenge-statement.hbs
@@ -8,11 +8,11 @@
             <:triggerElement>
               <button
                 type="button"
+                class="challenge-statement__text-to-speech-trigger"
                 aria-label={{this.textToSpeechButtonTooltipText}}
                 {{on "click" this.toggleInstructionTextToSpeech}}
-                class="challenge-statement__text-to-speech-trigger"
               >
-                <FaIcon @icon={{this.textToSpeechButtonIcon}} />
+                <PixIcon @name={{if this.isSpeaking "stopCircle" "volumeOn"}} />
               </button>
             </:triggerElement>
             <:tooltip>

diff --git a/mon-pix/app/components/challenge-statement.js b/mon-pix/app/components/challenge-statement.js
@@ -18,7 +18,6 @@ export default class ChallengeStatement extends Component {
   @tracked displayAlternativeInstruction = false;
   @tracked isSpeaking = false;
   @tracked textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-  @tracked textToSpeechButtonIcon = 'volume-high';
 
   constructor() {
     super(...arguments);
@@ -78,7 +77,6 @@ export default class ChallengeStatement extends Component {
       speechSynthesis.cancel();
       this.isSpeaking = false;
       this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-      this.textToSpeechButtonIcon = 'volume-high';
     } else {
       const element = document.getElementsByClassName('challenge-statement-instruction__text')[0];
       const textToSpeech = new SpeechSynthesisUtterance(element.innerText);
@@ -88,7 +86,6 @@ export default class ChallengeStatement extends Component {
       textToSpeech.onend = () => {
         this.isSpeaking = false;
         this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-        this.textToSpeechButtonIcon = 'volume-high';
       };
       this.isSpeaking = true;
       this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.stop');
@@ -112,8 +109,8 @@ export default class ChallengeStatement extends Component {
     this.metrics.add({
       event: 'custom-event',
       'pix-event-category': 'Vocalisation',
-      'pix-event-action': `Assessment : ${this.args.assessment.id} Epreuve : ${this.args.challenge.id}`,
-      'pix-event-name': `Click sur le bouton de vocalisation : ${this.isSpeaking ? 'lecture' : 'stop'}`,
+      'pix-event-action': "Lecture d'une épreuve",
+      'pix-event-name': `Clic sur le bouton de lecture d'épreuve : ${this.isSpeaking ? 'play' : 'stop'}`,
     });
   }
 

diff --git a/mon-pix/app/controllers/assessments/challenge.js b/mon-pix/app/controllers/assessments/challenge.js
@@ -252,8 +252,8 @@ export default class ChallengeController extends Controller {
     this.metrics.add({
       event: 'custom-event',
       'pix-event-category': 'Vocalisation',
-      'pix-event-action': `Assessment : ${this.model.assessment.id} Epreuve : ${this.model.challenge.id}`,
-      'pix-event-name': `Click sur le bouton d'activation de la vocalisation : ${this.isTextToSpeechActivated ? 'activé' : 'désactivé'}`,
+      'pix-event-action': 'Activation globale de la vocalisation',
+      'pix-event-name': `Clic sur le bouton d'activation de la vocalisation : ${this.isTextToSpeechActivated ? 'activé' : 'désactivé'}`,
     });
   }
 }
diff --git a/mon-pix/app/styles/components/_assessment-banner.scss b/mon-pix/app/styles/components/_assessment-banner.scss
@@ -90,4 +90,9 @@
 
 .assessment-banner__text-to-speech-toggle {
   z-index: 1;
+  line-height: 0;
+
+  button {
+    color: var(--pix-neutral-0);
+  }
 }
diff --git a/mon-pix/tests/integration/components/challenge-statement-test.js b/mon-pix/tests/integration/components/challenge-statement-test.js
@@ -298,8 +298,8 @@ module('Integration | Component | ChallengeStatement', function (hooks) {
                 sinon.assert.calledWithExactly(add, {
                   event: 'custom-event',
                   'pix-event-category': 'Vocalisation',
-                  'pix-event-action': `Assessment : ${this.assessment.id} Epreuve : ${this.challenge.id}`,
-                  'pix-event-name': 'Click sur le bouton de vocalisation : lecture',
+                  'pix-event-action': "Lecture d'une épreuve",
+                  'pix-event-name': "Clic sur le bouton de lecture d'épreuve : play",
                 });
                 assert.ok(true);
               });