Adobe-Plug-in: getResponsiveLayout
Mit dem getResponsiveLayout-Plug-in können Sie verfolgen, welche Version Ihrer auf einem responsiven Design basierenden Website aktuell von einem Besucher angesehen wird. Adobe empfiehlt die Verwendung dieses Plug-ins, wenn Ihre Website ein responsives Design verwendet und Sie die Version der von einem Besucher angezeigten Website verfolgen möchten. Dieses Plug-in ist nicht erforderlich, wenn Ihre Website kein responsives Design verwendet.
Installieren des Plug-ins mit der Web SDK- oder Web SDK-Erweiterung
Dieses Plug-in wird noch nicht für die Verwendung im Web SDK unterstützt.
Installieren des Plug-ins mit der Adobe Analytics-Erweiterung
Adobe bietet eine Erweiterung, mit der Sie am häufigsten verwendete Plug-ins mit Adobe Analytics verwenden können.
-
Melden Sie sich bei der Adobe Experience Platform-Datenerfassung mit Ihren Adobe ID-Anmeldeinformationen an.
-
Klicken Sie auf die gewünschte Tag-Eigenschaft.
-
Gehen Sie zur Registerkarte Erweiterungen und klicken Sie dann auf die Schaltfläche Katalog.
-
Installieren und Veröffentlichen der Erweiterung Common Analytics Plugins.
-
Wenn Sie dies noch nicht getan haben, erstellen Sie eine Regel mit der Bezeichnung „Plug-ins initialisieren“ mit der folgenden Konfiguration:
- Bedingung: Keine
- Ereignis: Core – Bibliothek geladen (Seitenanfang)
-
Fügen Sie der obenstehenden Regel eine Aktion mit der folgenden Konfiguration hinzu:
- Erweiterung: Common Analytics Plugins
- Aktionstyp: getResponsiveLayout initialisieren
-
Speichern und veröffentlichen Sie die Änderungen an der Regel.
Installieren des Plug-ins mit dem benutzerdefinierten Code-Editor
Wenn Sie die Plug-in-Erweiterung "Common Analytics Plugins"nicht verwenden möchten, können Sie den Editor für benutzerdefinierten Code verwenden.
- Melden Sie sich bei der Adobe Experience Platform-Datenerfassung mit Ihren Adobe ID-Anmeldeinformationen an.
- Klicken Sie auf die gewünschte Eigenschaft.
- Gehen Sie zur Registerkarte Erweiterungen und klicken Sie dann unter der Erweiterung „Adobe Analytics“ auf die Schaltfläche Konfigurieren.
- Erweitern Sie das Akkordeon Tracking mit benutzerdefiniertem Code konfigurieren, wodurch die Schaltfläche Editor öffnen angezeigt wird.
- Öffnen Sie den Editor für benutzerdefinierten Code und fügen Sie den unten angegebenen Plug-in-Code in das Bearbeitungsfenster ein.
- Speichern und veröffentlichen Sie die Änderungen an der Analytics-Erweiterung.
Installieren des Plug-ins mit AppMeasurement
Kopieren Sie den folgenden Code und fügen Sie ihn an beliebiger Stelle in der AppMeasurement Datei ein, nachdem das Analytics-Tracking-Objekt instanziiert wurde (unter Verwendung von s_gi). Die Beibehaltung von Kommentaren und Versionsnummern des Codes in Ihrer Implementierung hilft Adobe bei der Fehlerbehebung potenzieller Probleme.
/******************************************* 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 ********************************************/
Verwenden des Plug-ins
Die getResponsiveLayout-Funktion verwendet die folgenden Argumente:
ppw(erforderlich, Ganzzahl): Die maximale Breite von Pixeln, die ein Browser-Fenster haben kann, bevor die Seite von einem Smartphone-Hochformat-Layout zu einem Smartphone-Querformat-Layout wechseltplw(Erforderlich, Ganzzahl): Die maximale Breite von Pixeln, die ein Browser-Fenster haben kann, bevor die Seite von einem Smartphone-Querformat-Layout zu einem Tablet-Layout wechselttw(erforderlich, Ganzzahl): Die maximale Breite in Pixeln, die ein Browser-Fenster haben kann, bevor die Seite von einem Tablet-Layout zu einem Desktop-Layout wechselt
Der Aufruf dieser Funktion gibt eine Zeichenfolge zurück, die zwei durch einen Doppelpunkt (:) getrennte Teile enthält. Der erste Teil der Zeichenfolge enthält einen der folgenden Werte, je nach Browser-Breite und den obigen Argumenten:
"phone portrait layout""phone landscape layout""phone layout"(für Websites ohne Layouts im Hoch- und Querformat)"tablet layout""desktop layout"
Der zweite Teil der zurückgegebenen Zeichenfolge ist die Breite und Höhe des Browsers. Beispiel: "desktop layout:1243x700".
Beispiele
// 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);
Versionsverlauf
1.1 (19. März 2021)
- Versionsnummer als Kontextdaten hinzugefügt.
1.0 (2. Mai 2018)
- Erste Version.