[RISOLTO] Trigger evento: alla rotazione dello schermo (mobile)

Supporto in italiano (Italian)
1

Salve a tutti,

stavo cercando un modo per far scattare un evento “alla rotazione dello schermo” (su mobile naturalmente!).
Noto però che non esiste un trigger specifico; ipotizzo quindi che non sia possibile effettuare un tracciamento in tale senso.

Oppure mi sfugge qualcosa o qualcuno ha trovato magari soluzioni alternative?

Grazie!

2

Ok, RISOLTO!

Ho fatto il tracciamento su Matomo da un javascript esterno:

/* Traccia rotazione dello schermo su Motomo */

   function trackScreenOrientation() {
        var orientation = window.innerWidth > window.innerHeight ? 'Rotazione/Resize Orizzontale' : 'Rotazione/Resize Verticale';
        
  if (typeof _paq !== 'undefined') {
        _paq.push(['trackEvent', 'UX', 'Rotazione/Resize schermo', orientation]);
    }
 }
  
    window.addEventListener('resize', trackScreenOrientation);

Basandosi sul “resize” funziona anche per ridimensionamenti del browser sul desktop.

1 Like
3

Ciao Dret, scusa il ritardo nella risposta, il codice che hai messo è utile per ascoltare l’evento resize, che però, vado a memoria, potrei sbagliarmi, mi pare venga “triggato” più volte in fase di trascinamento della geometria della finestra.

Se hai a disposizione un framework frontend in javascript, è meglio seguire gli eventi messi a disposizione dal frontend stesso.

Ad esempio per React, c’è una libreria che lo fa. In entrambi i casi cmq sei in grado di sapere quand’è orizzontale o verticale, misurando il rapporto tra larghezza ed altezza… A meno che la pagina non sia vista su uno schermo quadrato! :laughing:

4

Nel frattempo ho modificato il codice… limitandolo ai soli dispositivi “tuoch” (device mobili), che è quello che cercavo in origine:

Nel mio caso ho un normale sito Wordpress.

Ora sto usando questo:

function() {
    const isTouchDevice = () => 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

    let lastOrientation = window.innerWidth > window.innerHeight ? 'Landscape' : 'Portrait';

    const trackScreenOrientation = (event) => {
        const currentOrientation = event.matches ? 'Landscape' : 'Portrait';

        // Controlla se l'orientamento è cambiato
        if (currentOrientation !== lastOrientation) {
            lastOrientation = currentOrientation;
            const orientationEvent = currentOrientation === 'Landscape' ? 'Rotazione Orizzontale' : 'Rotazione Verticale';

            if (typeof _paq !== 'undefined') {
                _paq.push(['trackEvent', 'UX', 'Rotazione schermo', orientationEvent]);
            }
        }
    };

    // Utilizza matchMedia per monitorare i cambiamenti di orientamento
    if (isTouchDevice()) {
        const mediaQuery = window.matchMedia("(orientation: landscape)");
        mediaQuery.addEventListener('change', trackScreenOrientation);
        
        // Chiamata iniziale per tracciare l'orientamento al caricamento della pagina
        //trackScreenOrientation(mediaQuery);
    }
};
1 Like