Plug-in Adobe : getResponsiveLayout

Le plug-in getResponsiveLayout vous permet de savoir quelle version de votre site web basé sur une conception adaptée est actuellement consultée par un visiteur. Adobe recommande d’utiliser ce plug-in si votre site utilise une conception adaptée et que vous souhaitez effectuer le suivi de la version du site consultée par un visiteur. Ce plug-in n’est pas nécessaire si votre site n’utilise pas de conception adaptée.

Installation du module externe à l’aide du SDK Web ou de l’extension SDK Web

Ce module externe n’est pas encore pris en charge pour une utilisation dans le SDK Web.

Installation du module externe à l’aide de l’extension Adobe Analytics

Adobe propose une extension qui vous permet d’utiliser les plug-ins les plus couramment utilisés avec Adobe Analytics.

1. Connectez-vous à la collecte de données Adobe Experience Platform à l’aide de vos identifiants Adobe ID.
2. Cliquez sur la propriété de balise de votre choix.
3. Accédez à l’onglet Extensions, puis cliquez sur le bouton Catalogue.
4. Installez et publiez l’extension Plug-ins Analytics communs.
5. Si ce n’est pas déjà fait, créez une règle intitulée « Initialiser les plug-ins » avec la configuration suivante :
   • Condition : aucune
   • Événement : Core - Bibliothèque chargée (Haut de la page)
6. Ajoutez une action à la règle ci-dessus avec la configuration suivante :
   • Extension : plug-ins Analytics communs
   • Type d’action : initialisation de getResponsiveLayout
7. Enregistrez et publiez les modifications apportées à la règle.

Installation du plug-in à l’aide de l’éditeur de code personnalisé

Si vous ne souhaitez pas utiliser l’extension de plug-in Plugins Analytics communs, vous pouvez utiliser l’éditeur de code personnalisé.

1. Connectez-vous à la collecte de données Adobe Experience Platform à l’aide de vos identifiants Adobe ID.
2. Cliquez sur la propriété de votre choix.
3. Accédez à l’onglet Extensions, puis cliquez sur le bouton Configurer sous l’extension Adobe Analytics.
4. Développez l’accordéon Configurer le suivi à l’aide d’un code personnalisé, qui affiche le bouton Ouvrir l’éditeur.
5. Ouvrez l’éditeur de code personnalisé et collez le code de plug-in fourni ci-dessous dans la fenêtre de modification.
6. Enregistrez et publiez les modifications apportées à l’extension Analytics.

Installation du plug-in à l’aide d’AppMeasurement

Copiez et collez le code suivant n’importe où dans le fichier AppMeasurement après l’instanciation de l’objet de suivi Analytics (à l’aide de s_gi). La conservation des commentaires et des numéros de version du code dans votre mise en œuvre permet à Adobe de résoudre les éventuels problèmes.

/******************************************* 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 ********************************************/

Utilisation du plug-in

La fonction getResponsiveLayout utilise les arguments suivants :

• ppw (obligatoire, entier) : largeur maximale possible en pixels d’une fenêtre de navigateur avant que la page ne passe du mode portrait au mode paysage.
• plw (obligatoire, entier) : largeur maximale possible en pixels d’une fenêtre de navigateur avant que la page ne passe du mode paysage au mode tablette.
• tw (obligatoire, entier) : largeur maximale possible en pixels dʼune fenêtre de navigateur avant que la page ne passe du mode tablette au mode bureau.

Lʼappel de cette fonction renvoie une chaîne contenant deux parties délimitées par deux points (:). La première partie de la chaîne contient lʼune des valeurs suivantes, selon la largeur de la fenêtre du navigateur et les arguments ci-dessus :

• "phone portrait layout"
• "phone landscape layout"
• "phone layout" (pour les sites qui n’ont pas de format portrait et paysage)
• "tablet layout"
• "desktop layout"

La deuxième partie de la chaîne renvoyée correspond aux dimensions en largeur et en hauteur du navigateur. Par exemple : "desktop layout:1243x700".

Exemples

// 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);

Historique des versions

1.1 (19 mars 2021)

• Ajout du numéro de version comme donnée contextuelle.

1.0 (2 mai 2018)

• Version initiale.

Ressources Business.Adobe.com

Third Party Data Customer Profiles Data Management Platform Customer Segmentation Data Warehouse Data Analytics