Sie sehen sich Hilfeinhalte der folgenden Version an:

Einschließen des SiteCatalyst-Moduls in eine Seitenkomponente

Für Seitenvorlagenkomponenten (z. B. body.jsp) sind zwei JSP-Includes erforderlich, damit die ClientContext- und die SiteCatalyst-Integration (die Teil der Cloud-Services ist) geladen werden. Beide Includes laden JavaScript-Dateien.

Das ClientContext-Skript sollte direkt unter dem Tag <body>, das Cloud-Services-Skript direkt über dem Tag </body> eingefügt werden, zum Beispiel wie folgt:

<body>
 <cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

....

 <cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
</body>

Mit dem clientcontext-Skript, das Sie nach dem body-Element einfügen, werden die ClientContext-Funktionen zur Seite hinzugefügt.

Das cloudservices-Skript, das Sie vor dem body-Element einfügen, gilt für die Konfigurationen der zur Seite hinzugefügten Cloud-Services. (Falls die Seite mehr als eine Cloud-Services-Konfiguration verwendet, müssen Sie das ClientContext-JSP und das Cloud-Services-JSP nur einmal einschließen.)

Wenn ein SiteCatalyst-Framework zur Seite hinzugefügt wird, erzeugt das cloudservices-Skript (/libs/cq/analytics/components/sitecatalyst/sitecatalyst.jsp) SiteCatalyst-bezogenes JavaScript und Referenzen zu clientseitigen Bibliotheken, ähnlich dem folgenden Beispiel:

<div class="sitecatalyst cloudservice">
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/util.js"></script>
<script type="text/javascript" src="/content/geometrixx-outdoors/_jcr_content/analytics.sitecatalyst.js"></script>
<script type="text/javascript" src="/etc/clientlibs/mac/mac-sc.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/plugins.js"></script>
<script type="text/javascript">
<!--
CQ_Analytics.Sitecatalyst.frameworkComponents = ['foundation/components/page'];
/**
 * Sets SiteCatalyst variables accordingly to mapped components. If <code>options</code> 
 * object is provided only variables matching the options.componentPath are set.
 *
 * @param {Object} options Parameter object from CQ_Analytics.record() call. Optional.
 */
CQ_Analytics.Sitecatalyst.updateEvars = function(options) {
    this.frameworkMappings = [];
	this.frameworkMappings.push({scVar:"pageName",cqVar:"pagedata.title",resourceType:"foundation/components/page"});
    for (var i=0; i<this.frameworkMappings.length; i++){
		var m = this.frameworkMappings[i];
		if (!options || options.compatibility || (options.componentPath == m.resourceType)) {
			CQ_Analytics.Sitecatalyst.setEvar(m);
		}
    }
}

CQ_Analytics.CCM.addListener("storesinitialize", function(e) {
	var collect = true;
    var lte = s.linkTrackEvents;
    s.pageName="content:geometrixx-outdoors:en";
    CQ_Analytics.Sitecatalyst.collect(collect);
    if (collect) {
		CQ_Analytics.Sitecatalyst.updateEvars();
	    /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
	    var s_code=s.t();if(s_code)document.write(s_code);
	    s.linkTrackEvents = lte;
	    if(s.linkTrackVars.indexOf('events')==-1){delete s.events};
	    $CQ(document).trigger("sitecatalystAfterCollect");
    }
});
//-->
</script>
<script type="text/javascript">
<!--
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-')
//-->
</script>
<noscript><img src="http://daydocumentation.112.2o7.net/b/ss/daydocumentation/1/H.25--NS/1380120772954?cdp=3&amp;gn=content%3Ageometrixx-outdoors%3Aen" height="1" width="1" border="0" alt=""/></noscript>
<span data-tracking="{event:'pageView', values:{}, componentPath:'foundation/components/page'}"></span>
<div id="cq-analytics-texthint" style="background:white; padding:0 10px; display:none;">
	<h3 class="cq-texthint-placeholder">Component clientcontext is missing or misplaced.</h3>
</div>
<script type="text/javascript">
$CQ(function(){
	if( CQ_Analytics &&
		CQ_Analytics.ClientContextMgr &&
		!CQ_Analytics.ClientContextMgr.isConfigLoaded ) 
		{
			$CQ("#cq-analytics-texthint").show();
		}
});
</script>
</div>

Dieser Code ist in allen AEM-Beispiel-Sites, wie Geometrixx Outdoors, eingeschlossen.

sitecatalystAfterCollect-Ereignis

Das cloudservices-Skript löst das sitecatalystAfterCollect-Ereignis aus:

$CQ(document).trigger("sitecatalystAfterCollect");

Dieses Ereignis wird als Bestätigung ausgelöst, sobald die Seitenverfolgung abgeschlossen ist. Falls Sie auf dieser Seite zusätzliche Verfolgungsvorgänge durchführen, müssen Sie einen Listener für dieses Ereignis anstelle des documentload- oder documentready-Ereignisses verwenden. Durch Verwendung des sitecatalystAfterCollect-Ereignisses vermeiden Sie Konflikte oder anderes unvorhersehbares Verhalten.

Hinweis:

Die Bibliothek /etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js beinhaltet den Code aus der Datei s_code.js von SiteCatalyst.

Implementieren von SiteCatalyst-Verfolgung für benutzerdefinierte Komponenten

Aktivieren Sie für CQ-Komponenten die Interaktion mit dem SiteCatalyst-Framework. Konfigurieren Sie dann das Framework so, dass SiteCatalyst die Komponentendaten verfolgt.

Komponenten, die mit dem SiteCatalyst-Framework interagieren, werden im Sidekick angezeigt, wenn Sie ein Framework bearbeiten. Nachdem Sie die Komponente auf das Framework gezogen haben, werden die Eigenschaften der Komponente angezeigt und Sie können diese den SiteCatalyst-Eigenschaften zuordnen. (Einzelheiten finden Sie unter Einrichten eines Frameworks für das grundlegende Tracking.)

Komponenten können mit dem SiteCatalyst-Framework interagieren, wenn sie einen untergeordneten Knoten analytics beinhalten. Der Knoten analytics hat folgende Eigenschaften:

  • cq:trackevents: Identifiziert das von der Komponente angezeigte CQ-Ereignis. (Siehe „Benutzerdefinierte Ereignisse.)
  • cq:trackvars: benennt die den SiteCatalyst-Eigenschaften zugeordneten CQ-Variablen.
  • cq:componentName: der Name der Komponente wird im Sidekick angezeigt.
  • cq:componentGroup: die Gruppe im Sidekick, die die Komponente enthält.

Der Code in der component.jsp fügt JavaScript zur Seite hinzu, der die Verfolgung auslöst, und definiert die zu verfolgenden Daten. Der Ereignisname und die Datennamen, die im JavaScript verwendet werden, müssen mit den entsprechenden Werten der Eigenschaften im Knoten analytics übereinstimmen. 

Wenn Sie diese Methoden zur Datenverfolgung verwenden, wird SiteCatalyst automatisch vom SiteCatalyst-Integrationsmodul aufgerufen, um Ereignisse und Daten aufzuzeichnen.

Beispiel: Verfolgen von topnav-Klicks

Erweitern Sie die Foundation-Komponente „topnav“ so, dass SiteCatalyst Klicks auf Navigations-Links oben auf der Seite verfolgt. Beim Klicken auf einen Navigations-Link zeichnet SiteCatalyst den Link und die Seite auf, auf die geklickt wurde.

Folgende Aufgaben müssen für die unten beschriebenen Verfahren bereits abgeschlossen sein:

  • Erstellen einer CQ-Anwendung
  • Erstellen einer SiteCatalyst-Konfiguration und eines SiteCatalyst-Frameworks

Kopieren der topnav-Komponente

Kopieren Sie der topnav- Komponente in die CQ-Anwendung. Dieses Verfahren setzt voraus, dass die Anwendung in CRXDE Lite eingerichtet ist.

  1. Klicken Sie mit der rechten Maustaste auf den Knoten /libs/foundation/components/topnav und dann auf „Kopieren“.

  2. Klicken Sie mit der rechten Maustaste auf den Ordner „Komponenten“ unter dem Anwendungsordner und dann auf „Einfügen“.

  3. Klicken Sie auf „Alle speichern“.

Integrieren von topnav und SiteCatalyst-Framework

Konfigurieren Sie die topnav-Komponente und bearbeiten Sie die JSP-Datei, um das Verfolgen von Ereignissen und Daten zu definieren.

  1. Klicken Sie mit der rechten Maustaste auf den topnav-Knoten und anschließend auf „Erstellen“ und „Knoten erstellen“. Geben Sie folgende Eigenschaftenwerte ein und klicken Sie dann auf „OK“:

    • Name: analytics
    • Typ: nt:unstructured
  2. Fügen Sie die folgende Eigenschaft zum analytics-Knoten hinzu, um das Verfolgungsereignis zu benennen:

    • Name: cq:trackevents
    • Typ: String
    • Wert: topnavClick
  3. Fügen Sie die folgende Eigenschaft zum analytics-Knoten hinzu, um die Datenvariablen zu benennen:

    • Name: cq:trackvars
    • Typ: String
    • Wert: topnavTarget,topnavLocation
  4. Fügen Sie die folgende Eigenschaft zum Knoten „analytics“ hinzu, um die Komponente für den Sidekick zu benennen:

    • Name: cq:componentName
    • Typ: String
    • Wert: topnav (tracking)
  5. Fügen Sie die folgende Eigenschaft zum Knoten „analytics“ hinzu, um die Komponentengruppe für den Sidekick zu benennen:

    • Name: cq:componentGroup
    • Typ: String
    • Wert: General
  6. Klicken Sie auf „Alle speichern“.

  7. Öffnen Sie die topnav.jsp-Datei.

  8. Fügen Sie im a-Element das folgende Attribut hinzu:

    onclick = "tracknav('<%= child.getPath() %>.html')" 
  9. Fügen Sie unten auf der Seite folgenden JavaScript-Code hinzu:

    <script type="text/javascript">
        function tracknav(target) {
                if (CQ_Analytics.Sitecatalyst) {
                    CQ_Analytics.record({
                        event: 'topnavClick',
                        values: {
                            topnavTarget: target,
                            topnavLocation:'<%=currentPage.getPath() %>.html'
                        },
                        componentPath: '<%=resource.getResourceType()%>'
                    });
                }
        }
    </script>  
  10. Klicken Sie auf „Alle speichern“.

Der Inhalt der topnav.jsp-Datei sollte jetzt wie folgt aussehen:

<%@page session="false"%><%--
  Copyright 1997-2008 Day Management AG
  Barfuesserplatz 6, 4001 Basel, Switzerland
  All Rights Reserved.

  This software is the confidential and proprietary information of
  Day Management AG, ("Confidential Information"). You shall not
  disclose such Confidential Information and shall use it only in
  accordance with the terms of the license agreement you entered into
  with Day.

  ==============================================================================

  Top Navigation component

  Draws the top navigation

--%><%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
        com.day.text.Text,
        com.day.cq.wcm.api.PageFilter,
        com.day.cq.wcm.api.Page,
        com.day.cq.commons.Doctype,
        org.apache.commons.lang3.StringEscapeUtils" %><%

    // get starting point of navigation
    long absParent = currentStyle.get("absParent", 2L);
    String navstart = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);

    //if not deep enough take current node
    if (navstart.equals("")) navstart=currentPage.getPath();

    Resource rootRes = slingRequest.getResourceResolver().getResource(navstart);
    Page rootPage = rootRes == null ? null : rootRes.adaptTo(Page.class);
    String xs = Doctype.isXHTML(request) ? "/" : "";
    if (rootPage != null) {
        Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
        while (children.hasNext()) {
            Page child = children.next();
            %><a onclick = "tracknav('<%= child.getPath() %>.html')"  href="<%= child.getPath() %>.html"><%
            %><img alt="<%= StringEscapeUtils.escapeXml(child.getTitle()) %>" src="<%= child.getPath() %>.navimage.png"<%= xs %>></a><%
        }
    }
%><script type="text/javascript">
    function tracknav(target) {
            if (CQ_Analytics.Sitecatalyst) {
                CQ_Analytics.record({
                    event: 'topnavClick',
                    values: {
                        topnavTarget:target,
                        topnavLocation:'<%=currentPage.getPath() %>.html'
                    },
                    componentPath: '<%=resource.getResourceType()%>'
                });
            }
    }
</script>  

Hinweis:

Oft ist es erwünscht, Daten aus dem ClientContext zu verfolgen. Weitere Informationen zur Verwendung von JavaScript zum Abrufen von Daten finden Sie unter Zugriff auf Werte im ClientContext

Hinzufügen der Verfolgungskomponente zum Sidekick

Fügen Sie Komponenten, die für die Verfolgung mit SiteCatalyst aktiviert sind, zum Sidekick hinzu, um sie dem Framework hinzuzufügen.

  1. Öffnen Sie das SiteCatalyst-Framework aus der SiteCatalyst-Konfiguration. (http://localhost:4502/etc/cloudservices/sitecatalyst.html)

  2. Klicken Sie im Sidekick auf die Schaltfläche „Design“.

    chlimage_1
  3. Klicken Sie im Konfigurationsbereich für die Linkverfolgung auf „Vererbung konfigurieren“.

    chlimage_1
  4. Wählen Sie aus der Liste „Zugelassene Komponenten“ im Abschnitt „Allgemein“ den Eintrag „topnav (tracking)“ aus und klicken Sie dann auf „OK“.

  5. Erweitern Sie den Sidekick, um in den Bearbeitungsmodus zu wechseln. Die Komponente ist jetzt in der Gruppe „Allgemein“ verfügbar.

    chlimage_1

Hinzufügen der topnav-Komponente zum Framework

Ziehen Sie die topnav-Komponente zu Ihrem SiteCatalyst-Framework und ordnen Sie die Variablen und Ereignisse den SiteCatalyst-Variablen und -Ereignissen zu. (Einzelheiten finden Sie unter Einrichten eines Frameworks für das grundlegende Tracking.)

chlimage_1

Die topnav-Komponente ist jetzt mit dem SiteCatalyst-Framework integriert. Wenn Sie die Komponente in eine Seite einfügen, werden beim Klicken auf die Elemente in der oberen Navigationsleiste Verfolgungsdaten an SiteCatalyst gesendet.

Senden von s.products-Daten an SiteCatalyst

Komponenten können Daten für die s.products-Variable erzeugen, die an SiteCatalyst gesendet werden. Entwerfen Sie Komponenten, die Daten für die s.products-Variable erzeugen:

  • Zeichnen Sie einen Wert product mit einer spezifischen Struktur auf.
  • Zeigen Sie die Datenmitglieder des product-Werts an, sodass sie SiteCatalyst-Variablen im SiteCatalyst-Framework zugeordnet werden können.

Die s.products-Variable von SiteCatalyst verwendet die folgende Syntax:

s.products="category;product;quantity;price;eventY={value}|eventZ={value};evarA={value}|evarB={value}"

Das SiteCatalyst-Integrationsmodul erstellt die s.products-Variable anhand der product-Werte, die von den AEM-Komponenten erzeugt werden. Der von den AEM-Komponenten in JavaScript erzeugte product-Wert ist ein Array von Werten mit folgender Struktur:

"product": [{
		  "category": "",
		  "sku"     : "path to product node",
		  "quantity": quantity,
		  "price"   : price,
		  "events   : {
				  "eventName1": "eventValue1",
				  "eventName_n": "eventValue_n"
		  }
		  "evars"   : {
				  "eVarName1": "eVarValue1",
				  "eVarName_n": "eVarValue_n"
		  }
}]

Wenn ein Datenelement im product-Wert ausgelassen wird, wird es als leere Zeichenfolge in s.products gesendet.

Hinweis:

Wenn einem product-Wert kein Ereignis zugeordnet ist, verwendet SiteCatalyst standardmäßig das prodView-Ereignis.

Der Knoten analytics der Komponente muss die Namen der Variablen anzeigen, die die cq:trackvars-Eigenschaft verwenden:

  • product.category
  • product.sku
  • product.quantity
  • product.price
  • product.events.eventName1
  • product.events.eventName_n
  • product.evars.eVarName1
  • product.evars.eVarName_n

Das eCommerce-Modul stellt eine Reihe von Komponenten bereit, die Daten für die s.products-Variable erzeugen. Die Komponente „submitorder“ (http://localhost:4502/crx/de/index.jsp#/libs/commerce/components/submitorder/submitorder.jsp) erzeugt beispielsweise JavaScript, das dem folgenden Beispiel ähnelt:

<script type="text/javascript">
    function trackCartPurchase() {
        if (CQ_Analytics.Sitecatalyst) {
            CQ_Analytics.record({
                "event": ["productsCartPurchase"],
                "values": {
                    "product": [
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/1",
                            "quantity": 3,
                            "price"   : 179.7,
                            "evars"   : {
                                "childSku": "/path/to/prod/1/green/xs",
                                "size"    : "XS"
                            }
                        },
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/2",
                            "quantity": 10,
                            "price"   : 150,
                            "evars"   : {
                                "childSku": "/path/to/prod/2",
                                "size"    : ""
                            }
                        },
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/3",
                            "quantity": 2,
                            "price"   : 102,
                            "evars"   : {
                                "childSku": "/path/to/prod/3/m",
                                "size"    : "M"
                            }
                        }
                    ]
                },
                "componentPath": "commerce/components/submitorder"
            });
            CQ_Analytics.record({
                "event": ["discountRedemption"],
                "values": {
                    "discount": "/path/to/discount/1 - /path/to/discount/2",
                    "product" : [{
                        "category": "",
                        "sku"     : "Promotional Discount",
                        "events"  : {"discountRedemption": 20.00}
                    }]
                },
                "componentPath": "commerce/components/submitorder"
            });
            CQ_Analytics.record({
                "event": ["cartPurchase"],
                "values": {
                    "orderId"       : "00e40e2d-13a2-4a00-a8ee-01a9ebb0bf68",
                    "shippingMethod": "overnight",
                    "paymentMethod" : "Amex",
                    "billingState"  : "NY",
                    "billingZip"    : "10458",
                    "product"       : [{"category": "", "sku": "", "quantity": "", "price": ""}]
                },
                "componentPath": "commerce/components/submitorder"
            });
        }
        return true;
    }
</script>

Beschränken der Größe von Verfolgungsaufrufen

Im Allgemeinen beschränken Webbrowser die Größe von GET-Anforderungen. Da es sich beim CQ-Produkt und den SKU-Werten um Repository-Pfade handelt, können Produkt-Arrays mit mehreren Werten die Größenbeschränkung einer Anforderung überschreiten. Daher sollten die Komponenten die Anzahl der Elemente im product-Array jeder Funktion CQ_Analytics.record beschränken. Erstellen Sie mehrere Funktionen, wenn die Anzahl der Elemente, die Sie verfolgen möchten, das Limit überschreiten kann.

Die submitorder-eCommerce-Komponente beschränkt z. B. die Anzahl der product-Elemente in einem Aufruf auf vier. Wenn der Warenkorb mehr als vier Produkte enthält, erzeugt sie mehrere CQ_Analytics.record-Funktionen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie