Composants de modèle de page (par ex. head.jsp, body.jsp
) doivent inclure JSP pour charger ContextHub et l’intégration Adobe Analytics (qui fait partie des Cloud Services). Toutes 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 variable <head>
et avant l’événement </body>
section; 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 contexthub
script que vous insérez après la balise <head>
ajoute les fonctions ContextHub à la page.
Le cloudservices
les scripts que vous ajoutez dans la variable <head>
et le <body>
s’appliquent aux configurations de services cloud ajoutées à la page. (Si la page utilise plusieurs configurations de Cloud Services, vous ne devez inclure le jsp ContextHub et le jsp Cloud Services qu’une seule fois.)
Lorsqu’une structure Adobe Analytics est ajoutée à la page, la variable cloudservices
les scripts génèrent du code 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 cloudservices
déclenche le sitecatalystAfterCollect
event:
$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. En utilisant la variable sitecatalystAfterCollect
évite les collisions ou tout autre comportement imprévisible.
Le /libs/cq/analytics/clientlibs/sitecatalyst/sitecatalyst.js
La bibliothèque comprend le code provenant d’Adobe Analytics. s_code.js
fichier .
Activez vos composants AEM pour interagir avec la structure Adobe Analytics. Ensuite, configurez votre structure de sorte qu’Adobe Analytics suive les données du composant.
Les composants qui interagissent avec la structure Adobe Analytics apparaissent dans le 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 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 qui sont mappées 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 de l’événement et les noms de données utilisés dans le JavaScript doivent correspondre aux valeurs correspondantes de la variable analytics
propriétés du noeud.
Lorsque vous utilisez ces méthodes de suivi de données, le module d’intégration Adobe Analytics effectue automatiquement les appels vers Adobe Analytics pour enregistrer les événements et les données.
Étendez le composant topnav de base afin qu’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 qui a fait l’objet d’un clic 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 topnav.jsp
fichier .
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 de la variable topnav.jsp
doit 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 d’effectuer le suivi des données à partir 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 Adobe Analytics dans le sidekick 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 événements du composant avec les variables et événements Adobe Analytics. (Voir Configuration d’une structure pour le suivi de base.)
Le composant topnav est désormais intégré à la structure Adobe Analytics. Lorsque vous ajoutez le composant à une page, cliquez sur les éléments de la barre de navigation supérieure pour envoyer les 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’elles puissent être mappées avec des variables Adobe Analytics dans la structure Adobe Analytics.La variable s.products d’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 de la variable product
valeurs générées par les composants AEM. Le 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 la variable prodView
par défaut.
Le analytics
du composant doit exposer les noms des variables à l’aide de la propriété cq:trackvars
property:
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 la variable product
tableau 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 d’eCommerce limite le nombre de product
éléments dans un appel à quatre. Lorsque le panier contient plus de quatre produits, il génère plusieurs fonctions CQ_Analytics.record
.