Plug-in di Adobe: getResponsiveLayout

Il plug-in getResponsiveLayout consente di monitorare quale versione del sito web dinamico basato sulla progettazione sta attualmente esaminando un visitatore. Adobe consiglia di utilizzare questo plug-in se il sito utilizza una progettazione reattiva e desideri tenere traccia della versione del sito visualizzata da un visitatore. Questo plug-in non è necessario se il sito non utilizza design reattivo.

Installare il plug-in utilizzando i tag in Adobe Experience Platform

Adobe offre un’estensione che consente di utilizzare i plug-in più comunemente utilizzati.

1. Accedi all' Interfaccia di raccolta dati utilizzando le tue credenziali AdobeID.
2. Fai clic sulla proprietà desiderata.
3. Vai alla scheda Extensions, quindi fai clic sul pulsante Catalog
4. Installa e pubblica l'estensione Common Analytics Plugins
5. Se non lo hai già fatto, crea una regola denominata "Inizializza plug-in" con la seguente configurazione:
   • Condizione: nessuna
   • Evento: Core - Libreria caricata (pagina in alto)
6. Aggiungi un'azione alla regola precedente con la seguente configurazione:
   • Estensione: Plug-in comuni di Analytics
   • Tipo azione: Inizializza getResponsiveLayout
7. Salva e pubblica le modifiche alla regola.

Installare il plug-in utilizzando l’editor di codice personalizzato

Se non desideri utilizzare l'estensione plug-in, puoi utilizzare l'editor di codice personalizzato.

1. Accedi all' Interfaccia di raccolta dati utilizzando le tue credenziali AdobeID.
2. Fai clic sulla proprietà desiderata.
3. Vai alla scheda Extensions , quindi fai clic sul pulsante Configure sotto l'estensione Adobe Analytics.
4. Espandi il Configure tracking using custom code pannello a soffietto, che mostra il pulsante Open Editor .
5. Apri l’editor di codice personalizzato e incolla il codice plug-in fornito di seguito nella finestra di modifica.
6. Salva e pubblica le modifiche all’estensione Analytics.

Installare il plug-in utilizzando AppMeasurement

Copia e incolla il seguente codice in qualsiasi punto del file AppMeasurement dopo la creazione dell'istanza dell'oggetto di tracciamento Analytics (utilizzando s_gi). La conservazione dei commenti e dei numeri di versione del codice nell’implementazione consente ad Adobe di risolvere eventuali problemi.

/******************************************* BEGIN CODE TO DEPLOY *******************************************/
/* Adobe Consulting Plugin: getResponsiveLayout v1.1 (Requires AppMeasurement) */
var getResponsiveLayout=function(ppw,plw,tw){var c=ppw,b=plw,e=tw;if("-v"===c)return{plugin:"getResponsiveLayout",version:"1.1"};a:{if("undefined"!==typeof window.s_c_il){var a=0;for(var d;a<window.s_c_il.length;a++)if(d=window.s_c_il[a],d._c&&"s_c"===d._c){a=d;break a}}a=void 0}"undefined"!==typeof a&&(a.contextData.getResponsiveLayout="1.1");if(!(isNaN(c)||isNaN(b)||isNaN(e)||b<c||e<b))return a=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,(c<b&&a<=b?a<=c?"phone portrait layout":"phone landscape layout":a<=b?"phone layout":a<=e?"tablet layout":"desktop layout")+":"+a+"x"+(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)};
/******************************************** END CODE TO DEPLOY ********************************************/

Usa il plug-in

La funzione getResponsiveLayout utilizza i seguenti argomenti:

• ppw (obbligatorio, numero intero): Larghezza massima dei pixel che una finestra del browser può avere prima che la pagina passi da un layout di ritratto del telefono a un layout basato su orizzontale del telefono
• plw (obbligatorio, numero intero): Larghezza massima dei pixel che una finestra del browser può avere prima che la pagina passi dal layout orizzontale del telefono a quello basato su tablet
• tw (obbligatorio, numero intero): Larghezza massima dei pixel che una finestra del browser può avere prima che la pagina passi da un layout tablet a un layout basato su desktop

Una chiamata a questa funzione restituisce una stringa contenente due parti delimitate da due punti (:). La prima parte della stringa contiene uno dei seguenti valori, a seconda della larghezza del browser e degli argomenti precedenti:

• "phone portrait layout"
• "phone landscape layout"
• "phone layout" (per i siti che non dispongono sia di layout verticale che orizzontale)
• "tablet layout"
• "desktop layout"

La seconda parte della stringa restituita sono le dimensioni di larghezza e altezza del browser. Ad esempio, "desktop layout:1243x700".

Esempi

// A visitor accesses your site on their laptop. The browser window is maximized.
// * Your site switches from phone portrait mode to phone landscape mode when the browser width is greater than 500 pixels
// * Your site switches from phone landscape mode to tablet mode when the browser width is greater than 700 pixels
// * Your site switches from tablet mode to desktop mode when the browser width is greater than 1000 pixels
// Sets eVar10 to "desktop layout:1920x937".
s.eVar10 = getResponsiveLayout(500, 700, 1000);

// A visitor accesses your site on their phone.
// * Your site has only a phone mode, a tablet mode, and a desktop mode
// * Your site switches from phone mode to tablet mode when the browser width is greater than 800 pixels
// * Your site switches from tablet mode to desktop mode when the browser width is greater than 1,100 pixels
// Sets eVar10 to "phone portrait layout:720x1280"
s.eVar10 = getResponsiveLayout(800, 800, 1100);

Cronologia versioni

1.1 (19 marzo 2021)

• È stato aggiunto il numero di versione come dati contestuali.

1.0 (2 maggio 2018)

• Versione iniziale.