Composants de modèle de page (ex. head.jsp, body.jsp
) doit inclure JSP pour charger ContextHub et l’intégration Adobe Analytics (qui fait partie des Cloud Services). Tous comprennent le chargement de fichiers JavaScript.
L’entrée ContextHub doit être incluse immédiatement sous la balise <head>
, tandis que les Cloud Services doivent être inclus dans la balise <head>
et avant la section </body>
; par exemple :
<head>
<sling:include path="contexthub" resourceType="granite/contexthub/components/contexthub" />
...
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
...
</head>
<body>
...
<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
</body>
Le script contexthub
que vous insérez après l’élément <head>
ajoute les fonctionnalités ContextHub à la page.
Les scripts cloudservices
que vous ajoutez dans les sections <head>
et <body>
s'appliquent aux configurations des services cloud qui sont ajoutées à la page. (Si la page utilise plusieurs configurations Cloud Services, vous devez inclure les fichiers jsp ContextHub et jsp Cloud Services une seule fois.)
Lorsqu’une structure Adobe Analytics est ajoutée à la page, les scripts cloudservices
génèrent du javascript lié à Adobe Analytics et des références à des 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 Adobe Analytics 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="https://daydocumentation.112.2o7.net/b/ss/daydocumentation/1/H.25--NS/1380120772954?cdp=3&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.
Le script cloudservices
déclenche le é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 du événement sitecatalystAfterCollect
permet d'éviter les collisions ou tout autre comportement imprévisible.
La bibliothèque /libs/cq/analytics/clientlibs/sitecatalyst/sitecatalyst.js
comprend le code du fichier Adobe Analytics s_code.js
.
Permettre à vos composants AEM d’interagir avec la structure Adobe Analytics. Configurez ensuite votre structure de sorte qu’Adobe Analytics suive les données du composant.
Les composants qui interagissent avec la structure Adobe Analytics apparaissent dans SideKick lorsque vous modifiez une structure. Après avoir fait glisser le composant vers la structure, les propriétés du composant s’affichent et vous pouvez ensuite les mapper avec les propriétés Adobe Analytics. (Voir Configuration d'une structure pour le suivi de base.)
Les composants peuvent interagir avec la structure Adobe Analytics lorsque le composant possède un noeud enfant nommé 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 mises en correspondance avec les propriétés Adobe Analytics.cq:componentName
: nom du composant qui s’affiche dans le sidekick.cq:componentGroup
: Groupe dans le Sidekick qui inclut 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 du événement et les noms de données utilisés dans le javascript doivent correspondre aux valeurs correspondantes des propriétés de noeud analytics
.
Lorsque vous utilisez ces méthodes de suivi de données, le module d'intégration Adobe Analytics effectue automatiquement les appels à Adobe Analytics pour enregistrer les événements et les données.
Etendez le composant de base topnav de sorte que Adobe Analytics effectue le suivi des clics sur les liens de navigation en haut de la page. Lorsqu’un utilisateur clique sur un lien de navigation, Adobe Analytics enregistre le lien sur lequel l’utilisateur a cliqué et la page sur laquelle il a cliqué.
Les procédures suivantes nécessitent que vous ayez déjà effectué les tâches suivantes :
Copiez le composant topnav sur votre application CQ. La procédure requiert que votre application soit installée dans CRXDE Lite.
/libs/foundation/components/topnav
et cliquez sur Copier.Configurez le composant topnav et modifiez le fichier JSP pour définir les événements et les données de suivi.
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 :
analytics
nt:unstructured
Ajoutez la propriété suivante au nœud analytics pour nommer l’événement de suivi :
Ajoutez la propriété suivante au nœud analytics pour nommer les variables de données :
Ajoutez la propriété suivante au nœud analytics pour nommer le composant pour le sidekick :
Ajoutez la propriété suivante au nœud analytics pour nommer le groupe de composants pour le sidekick :
Cliquez sur Enregistrer tout.
Ouvrez le fichier topnav.jsp.
Dans l’élément a, ajoutez l’attribut suivant :
onclick = "tracknav('<%= child.getPath() %>.html')"
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>
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>
Il est souvent souhaitable de suivre les données de ContextHub. Pour plus d’informations sur l’utilisation de javascript pour obtenir ces informations, voir Accès aux valeurs dans ContextHub.
Ajoutez les composants qui sont activés pour le suivi avec le panneau latéral Adobe Analytics à afin que vous puissiez les ajouter à votre structure.
Ouvrez votre structure Adobe Analytics à partir de votre configuration Adobe Analytics. (http://localhost:4502/etc/cloudservices/sitecatalyst.html)
Dans le sidekick, cliquez sur le bouton Créer.
Dans la zone Configuration du suivi des liens, cliquez sur Configurer l’héritage.
Dans la liste Composants autorisés, sélectionnez topnav (suivi) dans la section Général, puis cliquez sur OK.
Développez le sidekick pour passer en mode d’édition. Le composant est désormais disponible dans le groupe Général.
Faites glisser le composant topnav vers votre structure Adobe Analytics et mappez les variables et les événements des composants aux variables et événements Adobe Analytics. (Voir Configuration d'une structure pour le suivi de base.)
Le composant topnav est désormais intégré au cadre Adobe Analytics. Lorsque vous ajoutez le composant à une page, un clic sur les éléments dans la barre de navigation supérieure entraîne l’envoi de données de suivi à Adobe Analytics.
Les composants peuvent générer des données pour la variable s.products envoyée à Adobe Analytics. Concevez vos composants pour contribuer à la variable s.products :
product
avec une structure spécifique.product
afin qu’ils puissent être mappés avec des variables Adobe Analytics dans la structure Adobe Analytics.La variable s.products Adobe Analytics utilise la syntaxe suivante :
s.products="category;product;quantity;price;eventY={value}|eventZ={value};evarA={value}|evarB={value}"
Le module d’intégration Adobe Analytics construit la variable s.products
à l’aide des valeurs product
générées par AEM composants. La valeur product
dans le javascript que AEM composants génèrent est un tableau de valeurs dont la structure est la 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.
Lorsqu’aucun événement n’est associé à une valeur de produit, Adobe Analytics utilise par défaut le événement prodView
.
Le noeud analytics
du composant doit exposer les noms de variable à l'aide de la propriété cq:trackvars
:
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>
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 product
de chaque CQ_Analytics.record function
. Créez plusieurs fonctions si le nombre d’éléments que vous devez suivre peut dépasser cette limite.
Par exemple, le composant submitorder du commerce électronique limite à quatre le nombre d’éléments product
dans un appel. Lorsque le panier contient plus de quatre produits, il génère plusieurs fonctions CQ_Analytics.record
.