Asset Insights mit AEM Assets und Adobe Experience Platform Launch einrichten

In dieser fünfteiligen Videoserie gehen wir durch die Einrichtung und Konfiguration von Asset Insights for Experience Manager, die über Adobe Launch bereitgestellt werden.

Teil 1: Übersicht über Asset Insights

Übersicht über Asset Insights Installieren Sie Kernkomponenten, Beispielbildkomponente und andere Inhaltspakete, um Ihre Umgebung fertig zu stellen.

Architekturdiagramm

Architekturdiagramm

VORSICHT

Laden Sie unbedingt die aktuelle Version der Core-Komponenten für Ihre Implementierung herunter.

Das Video verwendet die Core-Komponenten v2.2.2, die nicht mehr die neueste Version sind. Achten Sie darauf, die neueste Version zu verwenden, bevor Sie mit dem nächsten Abschnitt fortfahren.

Teil 2: Aktivieren der Verfolgung von Asset Insights für die Beispielbildkomponente

Verbesserungen an Core-Komponenten und Verwendung der Proxykomponente (Beispielbildkomponente) für Asset Insights. Bearbeiten der Vorlagenrichtlinien für die Inhaltsseite, um die Beispielbildkomponente für die Referenz-Website zu aktivieren.

HINWEIS

Die Image-Core-Komponente bietet die Möglichkeit, die UUID-Verfolgung zu deaktivieren, indem die Verfolgung der UUID des Assets deaktiviert wird (eindeutiger Bezeichnerwert für einen in JCR erstellten Knoten).

Die Core-Image-Komponente verwendet das Attribut data-asset-id innerhalb des übergeordneten <div> eines Image-Tags, um diese Funktion zu aktivieren/deaktivieren. Die Proxy-Komponente setzt die Kernkomponente mit den folgenden Änderungen außer Kraft.

  • Entfernt die data-asset-id aus dem übergeordneten div eines <img>-Elements in image.html
  • Fügt data-aem-asset-id direkt zum <img>-Element in image.html hinzu.
  • Fügt dem <img>-Element in image.html den Wert data-trackable='true' hinzu.
  • data-aem-asset- idand data-trackable='true' werden auf derselben Knotenebene gespeichert
HINWEIS

data-aem-asset-id='image.UUID' und data-trackable='true' sind die Schlüsselattribute, die für Asset-Impressionen vorhanden sein müssen. Bei Asset Click Insights muss das übergeordnete <a>-Tag zusätzlich zu den oben genannten Datenattributen, die am <img>-Tag vorhanden sind, einen gültigen href-Wert haben.

Teil 3: Adobe Analytics — Erstellen von Report Suites, die die Echtzeit-Datenerfassung und den AEM Assets Berichte aktivieren

Für die Asset-Verfolgung wird eine Report Suite mit Echtzeit-Datenerfassung erstellt. Die AEM Assets Insights-Konfiguration wird mit Adobe Analytics-Anmeldeinformationen eingerichtet.

HINWEIS

Die Echtzeit-Datenerfassung und AEM Asset Berichte müssen für Ihre Adobe Analytics Report Suite aktiviert werden. Durch Aktivierung AEM Asset Berichte werden Analysevariablen zur Verfolgung von Asset-Einblicken reserviert.

Für die AEM Assets Insights-Konfiguration benötigen Sie die folgenden Anmeldeinformationen:

  • Rechenzentrum
  • Name der Analytics-Firma
  • Analytics-Benutzername
  • Shared Secret (erhältlich unter Adobe Analytics > Admin > Firma Settings > Web Service).
  • Report Suite (Achten Sie darauf, die richtige Report Suite auszuwählen, die für Asset Berichte verwendet wird)

Teil 4: Verwenden von Adobe Experience Platform Launch zum Hinzufügen der Adobe Analytics-Erweiterung

Hinzufügen von Adobe Analytics Extension, Erstellen von Seitenladeregeln und Integrieren von AEM mit dem technischen Konto der Adobe IMS.

HINWEIS

Achten Sie darauf, alle Änderungen von der Autoreninstanz in die Veröffentlichungsinstanz zu replizieren.

Artikel 1: Seitenverfolgung (pagetracker.js)

//For AEM 6.3
<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/foundation/assetinsights/pagetracker.js"></script>
//For AEM 6.4
<script type="text/javascript" src="http://localhost:4503/etc.clientlibs/dam/clientlibs/assetinsights/pagetracker.js"></script>

Seiten-Tracker implementiert zwei Rückrufe (registriert im Asset-Einbettungscode)

  • &lt;code>assetAnalytics.core.assetLoaded&lt;/code> <code><code>: aufgerufen, wenn das Ereignis "load"für das Element asset-DOM-Element ausgelöst wird.</code></code>
  • &lt;code>assetAnalytics.core.assetClicked&lt;/code> <code><code>: aufgerufen, wenn das Ereignis "click"für das Element asset-DOM-Element ausgelöst wird, ist dies nur relevant, wenn das Element asset-DOM-element ein Anker-Tag als übergeordnetes Element mit einem gültigen, externen Attribut "href"hat</code></code>

Schließlich implementiert Pagetracker eine Initialisierungsfunktion wie folgt:

  • &lt;code>assetAnalytics.dispatcher.init()&lt;/code> <code><code>: aufgerufen, um die Pagetracker-Komponente zu initialisieren.</code></code> Diese MUSS aufgerufen werden, bevor eines der Asset-Insight-Ereignis (Impressionen und/oder Klicks) von der Webseite generiert wird.
  • &lt;code>assetAnalytics.dispatcher.init()&lt;/code> <code><code>: optional ein AppMeasurement-Objekt — sofern vorhanden, wird nicht versucht, eine neue Instanz des AppMeasurement-Objekts zu erstellen.</code></code>

Regel 2: Bildverfolgung — Aktion 1 (asset-insights.js)

/*
 * AEM Asset Insights
 */

var sObj = window.s;
_satellite.notify('in assetAnalytics customInit');
(function initializeAssetAnalytics() {
 if ((!!window.assetAnalytics) && (!!assetAnalytics.dispatcher)) {
 _satellite.notify('assetAnalytics ready');
 /** NOTE:
  Copy over the call to 'assetAnalytics.dispatcher.init()' from Assets Pagetracker
  Be mindful about changing the AppMeasurement object as retrieved above.
  */
 assetAnalytics.dispatcher.init(
                                "",  /** RSID to send tracking-call to */
                                "",  /** Tracking Server to send tracking-call to */
                                "",  /** Visitor Namespace to send tracking-call to */
                                "",  /** listVar to put comma-separated-list of Asset IDs for Asset Impression Events in tracking-call, e.g. 'listVar1' */
                                "",  /** eVar to put Asset ID for Asset Click Events in, e.g. 'eVar3' */
                                "",  /** event to include in tracking-calls for Asset Impression Events, e.g. 'event8' */
                                "",  /** event to include in tracking-calls for Asset Click Events, e.g. 'event7' */
                                sObj  /** [OPTIONAL] if the webpage already has an AppMeasurement object, please include the object here. If unspecified, Pagetracker Core shall create its own AppMeasurement object */
                                );
 sObj.usePlugins = true;
 sObj.doPlugins = assetAnalytics.core.updateContextData;
}
 else {
 _satellite.notify('assetAnalytics not available. Consider updating the Custom Page Code', 4);
 }
})();

Regel 2: Bildverfolgung — Aktion 2 (image-tracker.js)

/*
 * AEM Asset Insights
 */

document.querySelectorAll('[data-aem-asset-id]').forEach(function(element) {
    assetAnalytics.core.assetLoaded(element);
    var parent = element.parentElement;
    if (parent.nodeName == "A") {
        parent.addEventListener("click", function() {
            assetAnalytics.core.assetClicked(this)
        });
    }
});
  • assetAnalytics.core.assetLoaded() : wird bei Abschluss des Seitenladevorgangs aufgerufen und ist Trigger Asset Impressions für alle nachverfolgbaren Bilder
  • Analytics-Variable, die die geladene Asset-Liste enthält: contextData['c.a.assets.idList']
  • assetAnalytics.core.assetClicked() : wird aufgerufen, wenn das Asset-DOM-Element über ein Verankerungs-Tag mit einem gültigen href-Wert verfügt. Wenn auf ein Asset geklickt wird, wird ein Cookie mit der angeklickten Asset-ID als Wert erstellt.(Cookie-Name: a.assets.clickedid)
  • Analytics-Variable, die die geladene Asset-Liste enthält: contextData['c.a.assets.clickedid']
  • Quelle der Herkunft: contextData['c.a.assets.source']

Konsolen-Debug-Anweisungen

//Launch Build Info
_satellite.buildInfo

//Enables debug messages
_satellite.setDebug(true);

//Asset Insight JS Object
assetAnalytics

//List of trackable images
document.querySelectorAll(".cmp-image__image");

Im Video werden zwei Google Chrome-Browsererweiterungen als Möglichkeiten zum Debugging von Analytics referenziert. Ähnliche Erweiterungen sind auch für andere Browser verfügbar.

Mit der folgenden Chrome-Erweiterung ist es auch möglich, DTM in den Debug-Modus umzuschalten: Launch and DTM Switch. Auf diese Weise können Sie leichter erkennen, ob Fehler bei der DTM-Bereitstellung vorliegen. Darüber hinaus können Sie DTM über alle Browser Developer Tools -> JS Console manuell in den Debug-Modus umschalten, indem Sie das folgende Codefragment hinzufügen:

Teil 5: Testen der Analytischen Verfolgung und Synchronisierung von Insight-Daten

Konfigurieren AEM Asset Berichte-Synchronisierungsauftrags- und Asset Insights-Berichts

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now