Plug-in di Adobe: getResponsiveLayout
Il plug-in getResponsiveLayout consente di tenere traccia della versione del sito Web reattivo basato sulla progettazione che un visitatore sta attualmente guardando. L’Adobe consiglia di utilizzare questo plug-in se il sito utilizza il design responsive e se desideri tenere traccia della versione del sito visualizzata da un visitatore. Questo plug-in non è necessario se il sito non utilizza la progettazione reattiva.
Installare il plug-in utilizzando l’estensione Web SDK o Web SDK
Questo plug-in non è ancora supportato per l’utilizzo nell’SDK per web.
Installare il plug-in utilizzando l’estensione Adobe Analytics
Adobe offre un’estensione che consente di utilizzare i plug-in più comunemente utilizzati con Adobe Analytics.
-
Accedi a Raccolta dati di Adobe Experience Platform utilizzando le credenziali Adobe ID.
-
Fai clic sulla proprietà del tag desiderata.
-
Vai alla scheda Extensions, quindi fai clic sul pulsante Catalog
-
Installa e pubblica l'estensione Common Analytics Plugins
-
Se non lo hai già fatto, crea una regola denominata "Initialize Plug-ins" (Inizializza plug-in) con la seguente configurazione:
- Condizione: nessuna
- Evento: Core - Library Loaded (Page Top)
-
Aggiungi un’azione alla regola precedente con la seguente configurazione:
- Estensione: Common Analytics Plugins
- Tipo azione: inizializzare getResponsiveLayout
-
Salva e pubblica le modifiche apportate alla regola.
Installare il plug-in utilizzando l’editor di codice personalizzato
Se non desideri utilizzare l’estensione del plug-in Common Analytics Plugins, puoi utilizzare l’editor di codice personalizzato.
- Accedi a Raccolta dati di Adobe Experience Platform utilizzando le credenziali Adobe ID.
- Fai clic sulla proprietà desiderata.
- Vai alla scheda Extensions, quindi fai clic sul pulsante Configure sotto l'estensione Adobe Analytics.
- Espandere il pannello a soffietto Configure tracking using custom code, che mostra il pulsante Open Editor.
- Apri l’editor di codice personalizzato e incolla il codice del plug-in fornito di seguito nella finestra di modifica.
- Salva e pubblica le modifiche nell’estensione Analytics.
Installare il plug-in utilizzando AppMeasurement
Copiare e incollare il codice seguente in qualsiasi punto del file di AppMeasurement dopo la creazione dell'istanza dell'oggetto di tracciamento di Analytics (utilizzando s_gi). Mantenere i commenti e i numeri di versione del codice nella tua implementazione aiuta ad Adobe nella risoluzione di 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 ********************************************/
Utilizzare il plug-in
La funzione getResponsiveLayout utilizza i seguenti argomenti:
ppw(obbligatorio, numero intero): la larghezza massima di pixel che una finestra del browser può avere prima che la pagina passi da un layout con orientamento verticale a un layout con orientamento orizzontale nel telefonoplw(obbligatorio, numero intero): la larghezza massima di pixel che una finestra del browser può avere prima che la pagina passi da un layout orizzontale per telefoni a un layout basato su tablettw(obbligatorio, numero intero): la larghezza massima di pixel consentita per una finestra del browser prima che la pagina passi da un layout tablet a uno desktop
La chiamata di 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 sopra riportati:
"phone portrait layout""phone landscape layout""phone layout"(per i siti che non dispongono di layout sia verticale che orizzontale)"tablet layout""desktop layout"
La seconda parte della stringa restituita è costituita dalle dimensioni di larghezza e altezza del browser. 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.