Vous consultez actuellement l'aide de la version:

Inclusion du module SiteCatalyst dans un composant de page

Les composants de modèle de page (par exemple, body.jsp) comprennent deux JSP pour charger ClientContext et l’intégration SiteCatalyst (qui fait partie des services cloud). Les deux incluent le chargement de fichiers JavaScript.

ClientContext doit être inclus juste en dessous de la balise <body>, alors que les services cloud doivent être inclus immédiatement au-dessus de la balise </body>, comme suit :

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

....

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

Le script clientcontext que vous insérez après l’élément body ajoute les fonctions de contexte client à la page.

Le script cloudservices que vous ajoutez avant le dernier élément body s’applique aux configurations des services cloud qui sont ajoutées à la page. (Si la page utilise plusieurs configurations de services cloud, vous devez inclure les JSP ClientContext et de services cloud une seule fois.)

Si une structure SiteCatalyst est ajoutée à la page, le script cloudservices (/libs/cq/analytics/components/sitecatalyst/sitecatalyst.jsp) génère le code JavaScript en rapport avec SiteCatalyst et les références aux bibliothèques côté client, comme dans l’exemple suivant :

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

Tous les exemples de sites, tels qu’AEM Geometrixx Outdoors, incluent ce code.

L’événement sitecatalystAfterCollect

Le script cloudservices déclenche l’événement sitecatalystAfterCollect :

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

Cet événement est déclenché pour indiquer que le suivi de page est terminé. Si vous effectuez des opérations de suivi supplémentaires sur cette page, vous devez écouter cet événement au lieu de l’événement de chargement de document ou de document prêt. L’utilisation de l’événement sitecatalystAfterCollect permet d’éviter les collisions ou tout autre comportement imprévisible.

Remarque :

La bibliothèque /etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js inclut le code dans le fichier SiteCatalyst s_code.js.

Mise en œuvre du suivi par SiteCatalyst des composants personnalisés

Permettez à vos composants CQ d’interagir avec la structure SiteCatalyst. Ensuite, configurez votre structure de sorte que SiteCatalyst suive les données de composant.

Les composants qui interagissent avec la structure SiteCatalyst apparaissent dans le sidekick latéral lorsque vous modifiez une structure. Faites glisser le composant vers la structure pour faire apparaître les propriétés du composant. Vous pouvez ensuite les mapper avec des propriétés SiteCatalyst. (Voir Configuration d’une structure pour le suivi de base.)

Les composants peuvent interagir avec la structure SiteCatalyst lorsqu’ils sont dotés d’un nœud enfant appelé analytics. Le nœud analytics possède les propriétés suivantes :

  • cq:trackevents : identifie les événements CQ exposés par le composant. (Voir Événements personnalisés.)
  • cq:trackvars : nomme les variables CQ qui sont mappées avec les propriétés SiteCatalyst.
  • cq:componentName : nom du composant qui s’affiche dans le sidekick.
  • cq:componentGroup : groupe dans le sidekick qui comprend le composant.

Le code dans le composant JSP ajoute le code JavaScript à la page pour déclencher le suivi et définir les données qui font l’objet d’un suivi. Le nom de l’événement et les noms des données utilisés dans le code JavaScript doivent être identiques aux valeurs correspondantes des propriétés de nœud analytics.

Lorsque vous utilisez ces méthodes de suivi des données, le module d’intégration de SiteCatalyst effectue automatiquement les appels auprès de SiteCatalyst pour enregistrer les événements et les données.

Exemple : suivi des clics de topnav

Étendez le composant topnav de base afin que SiteCatalyst suive les clics sur les liens de navigation en haut de la page. Lorsqu’un lien de navigation fait l’objet d’un clic, SiteCatalyst enregistre le lien sur lequel l’utilisateur a cliqué, ainsi que la page sur laquelle il a cliqué.

Les procédures suivantes nécessitent que vous ayez déjà effectué les tâches suivantes :

  • Création d’une application CQ
  • Création d’une configuration SiteSatalyst et d’une structure SiteCatalyst

Copie du composant topnav

Copiez le composant topnav sur votre application CQ. La procédure requiert que votre application soit installée dans CRXDE Lite.

  1. Cliquez avec le bouton droit sur le nœud /libs/foundation/components/topnav et cliquez sur Copier.

  2. Cliquez avec le bouton droit sur le dossier Components sous votre dossier d’application et cliquez sur Coller.

  3. Cliquez sur Enregistrer tout.

Intégration de topnav à la structure SiteCatalyst

Configurez le composant topnav et modifiez le fichier JSP pour définir les événements et les données de suivi.

  1. Cliquez avec le bouton droit sur le nœud topnav et cliquez sur Créer > Créer un nœud. Spécifiez les valeurs suivantes pour les propriétés, puis cliquez sur OK :

    • Nom : analytics
    • Type : nt:unstructured
  2. Ajoutez la propriété suivante au nœud analytics pour nommer l’événement de suivi :

    • Nom : cq:trackevents
    • Type : Chaîne
    • Valeur : topnavClick
  3. Ajoutez la propriété suivante au nœud analytics pour nommer les variables de données :

    • Nom : cq:trackvars
    • Type : Chaîne
    • Valeur : topnavTarget,topnavLocation
  4. Ajoutez la propriété suivante au nœud analytics pour nommer le composant pour le sidekick :

    • Nom : cq:componentName
    • Type : Chaîne
    • Valeur : topnav (suivi)
  5. Ajoutez la propriété suivante au nœud analytics pour nommer le groupe de composants pour le sidekick :

    • Nom : cq:componentGroup
    • Type : Chaîne
    • Valeur : General
  6. Cliquez sur Enregistrer tout.

  7. Ouvrez le fichier topnav.jsp.

  8. Dans l’élément a, ajoutez l’attribut suivant :

    onclick = "tracknav('<%= child.getPath() %>.html')" 
  9. Au bas de la page, ajoutez le code JavaScript suivant :

    <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. Cliquez sur Enregistrer tout.

Le contenu du fichier topnav.jsp devrait se présenter comme suit :

<%@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>  

Remarque :

Il est souvent préférable de suivre les données à partir du contexte client. Pour plus d’informations sur l’utilisation de JavaScript afin d’obtenir ces informations, voir Accès aux valeurs dans le contexte client

Ajout du composant de suivi au sidekick

Ajoutez au sidekick des composants permettant le suivi grâce à SiteCatalyst afin que vous puissiez les inclure dans votre structure.

  1. Ouvrez la structure SiteCatalyst de votre configuration SiteCatalyst. (http://localhost:4502/etc/cloudservices/sitecatalyst.html)

  2. Dans le sidekick, cliquez sur le bouton Créer.

    chlimage_1
  3. Dans la zone Configuration du suivi des liens, cliquez sur Configurer l’héritage.

    chlimage_1
  4. Dans la liste Composants autorisés, sélectionnez topnav (suivi) dans la section Général, puis cliquez sur OK.

  5. Développez le sidekick pour passer en mode d’édition. Le composant est désormais disponible dans le groupe Général.

    chlimage_1

Ajout du composant topnav à votre structure

Faites glisser le composant topnav vers votre structure de SiteCatalyst, et mappez les événements et les variables de composants aux événements et variables SiteCatalyst. (Voir Configuration d’une structure pour le suivi de base.)

chlimage_1

Le composant topnav est désormais intégré à la structure SiteCatalyst. Lorsque vous ajoutez le composant à une page, le fait de cliquer sur les éléments dans la barre de navigation supérieure entraîne l’envoi de données de suivi à SiteCatalyst.

Envoi de données s.products à SiteCatalyst

Les composants peuvent générer des données pour la variable s.products qui sont envoyées à SiteCatalyst. Concevez vos composants de manière à ce qu’ils contribuent à la variable s.products :

  • Enregistrez une valeur nommée product avec une structure spécifique.
  • Affichez les membres de données de la valeur product de façon à ce qu’ils puissent être mappés aux variables SiteCatalyst dans la structure SiteCatalyst.

La variable s.products de SiteCatalyst utilise la syntaxe suivante :

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

Le module d’intégration SiteCatalyst construit la variable s.products à l’aide des valeurs product que les composants AEM génèrent. La valeur product dans le code JavaScript que génèrent les composants AEM est un tableau de valeurs avec la structure suivante :

"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"
		  }
}]

Lorsqu’un élément de données est omis de la valeur product, il est envoyé en tant que chaîne vide dans s.products.

Remarque :

Lorsqu’aucun événement n’est associé à une valeur de produit, SiteCatalyst utilise l’événement prodView par défaut.

Le nœud analytics du composant doit exposer les noms des variables à l’aide de la propriété cq:trackvars :

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

Le module eCommerce fournit plusieurs composants qui génèrent des données de variable s.products. Par exemple, le composant submitorder (http://localhost:4502/crx/de/index.jsp#/libs/commerce/components/submitorder/submitorder.jsp) génère un code JavaScript qui est similaire à l’exemple suivant :

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

Limitation de la taille des appels de suivi

En règle générale, les navigateurs web limitent la taille des requêtes GET. Le produit CQ et les valeurs de SKU étant des chemins de référentiel, les tableaux de produits comportant plusieurs valeurs peuvent dépasser la taille maximale de requête. Par conséquent, vos composants doivent limiter le nombre d’éléments dans le tableau de produits de chaque fonction CQ_Analytics.record. Créez plusieurs fonctions si le nombre d’éléments que vous devez suivre peut dépasser cette limite.

Par exemple, le composant submitorder d’eCommerce limite à quatre le nombre d’éléments de produit dans un appel. Lorsque le panier contient plus de quatre produits, il génère plusieurs fonctions CQ_Analytics.record.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne