Visualizzazione del contenuto dell'aiuto per la versione :
Page template components (e.g. body.jsp) need two JSP includes in order to load the ClientContext and the SiteCatalyst integration (which is a part of Cloud Services). Both includes load JavaScript files.
The ClientContext should be included immediately below the <body> tag while Cloud Services should be included immediately above the </body> tag, like so:
<body> <cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/> .... <cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/> </body>
The clientcontext script that you insert after the body element adds the Client Context features to the page.
The cloudservices script that you add before the body end element applies to the cloud services configurations that are added to the page. (If the page uses more than one Cloud Services configuration, you need to include the ClientContext jsp and the Cloud Services jsp only once.)
When a SiteCatalyst framework is added to the page, the cloudservices script (/libs/cq/analytics/components/sitecatalyst/sitecatalyst.jsp) generates SiteCatalyst-related javascript and references to client-side librarires, similar to the following example:
<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&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>
$CQ(document).trigger("sitecatalystAfterCollect");
This event is triggered to indicate that page tracking has been completed. If you are performing additional tracking operations on this page, you should listen to this event instead of the document load or document ready event. Using the sitecatalystAfterCollect event avoids collisions or other unpredictable behavior.
Nota:
The /etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js library includes the code from the SiteCatalyst s_code.js file.
Enable your CQ components to interact with the SiteCatalyst framework. Then, configure your framework so that SiteCatalyst tracks the component data.
Components that interact with the SiteCatalyst framework appear in SideKick when you are editing a framework. After dragging the component to the framework, the component properties appear and you can then map them with SiteCatalyst properties. (See Setting Up a Framework For Basic Tracking.)
Components can interact with the SiteCatalyst framework when the component has a child node named analytics. The analytics node has the following properties:
- cq:trackevents: Identifies the CQ events that the component exposes. (See Custom Events.)
- cq:trackvars: Names the CQ variables that are mapped with SiteCatalyst properties.
- cq:componentName: The name for the component that appears in Sidekick.
- cq:componentGroup: The group in Sidekick that includes the component.
The code in the component JSP adds the javascript to the page that triggers the tracking, and defines the data that is tracked. The event name and data names used in the javascript must match the corresponding values of the analytics node properties.
- Use the data-tracking attribute to track event data when a page loads. (See Tracking Custom Events on Page Load.)
- Use the CQ_Analytics.record function to track event data when users interact with page features. (See Tracking Custom Events After Page Load.)
When you use these data-tracking methods, the SiteCatalyst integration module automatically performs the calls to SiteCatalyst to record the events and data.
Extend the foundation topnav component so that SiteCatalyst tracks clicks on navigation links at the top of the page. When a navigation link is clicked, SiteCatalyst records the link that was clicked, and the page on which it was clicked.
The following procedures require that you have already performed the following tasks:
- Created a CQ application.
- Created a SiteCatalyst Configuration and a SiteCatalyst Framework.
Copy the topnav component to your CQ application. The procedure requires that your application is set up in CRXDE Lite.
-
<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>
<%@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>
Nota:
It is often desirable to track data from the Client Context. For information about using javascript to obtain this information, see Accessing Values in the Client Context.
Add components that are enabled for tracking with the SiteCatalyst to Sidekick so that you can add them to your framework.
-
Open your SiteCatalyst framework from your SiteCatalyst Configuration. (http://localhost:4502/etc/cloudservices/sitecatalyst.html)
Drag the topnav component to your SiteCatalyst framework and map the component variables and events to SiteCatalyst variables and events. (See Setting Up a Framework For Basic Tracking.)
The topnav component is now integrated with the SiteCatalyst framework. When you add the component to a page, clicking the items in the top navigation bar causes tracking data to be sent to SiteCatalyst.
Components can generate data for the s.products variable that is sent to SiteCatalyst. Design your components to contribute to the s.products variable:
- Record a value named product of a specific structure.
- Expose the data members of the product value so that they can be mapped with SiteCatalyst variables in the SiteCatalyst framework.
The SiteCatalyst s.products variable uses the following syntax:
s.products="category;product;quantity;price;eventY={value}|eventZ={value};evarA={value}|evarB={value}"
The SiteCatalyst integration module constructs the s.products variable using the product values that AEM components generate. The product value in the javascript that AEM components generate is an array of values that have the following structure:
"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"
}
}]
Nota:
When no event is associated with a product value, SiteCatalyst uses the prodView event by default.
The analytics node of the component must expose the variable names using the cq:trackvars property:
- product.category
- product.sku
- product.quantity
- product.price
- product.events.eventName1
- product.events.eventName_n
- product.evars.eVarName1
- product.evars.eVarName_n
The eCommerce module provides several components that generate s.products variable data. For example, the submitorder component (http://localhost:4502/crx/de/index.jsp#/libs/commerce/components/submitorder/submitorder.jsp) generates javascript that is similar to the following example:
<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>
Generally, web browsers limit the size of GET requests. Because CQ product and SKU values are repository paths, product arrays that include multiple values can exceed the request size limit. Therefore, your components should limit the number of items in the product array of each CQ_Analytics.record function. Create multiple functions if the number of items that you need to track can exceed the limit.
For example, the eCommerce submitorder component limits the number of product items in a call to four. When the cart contains more than four products, it generates multiple CQ_Analytics.record functions.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.