The default set of Cloud Services can be extended with custom Cloud Service types. This allows you to inject custom markup into the page in a structured fashion. This will be primarily of use for 3rd party analytics providers, for example Google Analytics, Chartbeat, etc. Cloud Services are inherited from parent pages to child pages with the ability to break the inheritance at any level.
This step-by-step guide for creating a new Cloud Service is an example using Google Analytics. Everything might not apply to your use case.
In CRXDE Lite, ceate a new node under /apps
:
acs
nt:folder
Create a new node under /apps/acs
:
analytics
sling:Folder
Create 2 new nodes under /apps/acs/analytics
:
sling:Folder
and
sling:Folder
Right click on /apps/acs/analytics/components
. Select Create… followed by Create Component… The dialog that opens allows you to specify:
googleanalyticspage
Google Analytics Page
cq/cloudserviceconfigs/components/configpage
.hidden
Click Next twice and specify:
acs/analytics/templates/googleanalytics
Click Next twice and click OK.
Add a property to googleanalyticspage
:
cq:defaultView
html
Create a new file named content.jsp
under /apps/acs/analytics/components/googleanalyticspage
, with the following content:
<%@page contentType="text/html"
pageEncoding="utf-8"%><%
%><%@include file="/libs/foundation/global.jsp"%><div>
<div>
<h3>Google Analytics Settings</h3>
<ul>
<li><div class="li-bullet"><strong>accountID: </strong><br><%= xssAPI.encodeForHTML(properties.get("accountID", "")) %></div></li>
</ul>
</div>
Create a new node under /apps/acs/analytics/components/googleanalyticspage/
:
Name: dialog
Type: cq:Dialog
Properties:
title
String
Google Analytics Config
xtype
String
dialog
Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog
:
Name: items
Type: cq:Widget
Properties:
xtype
String
tabpanel
Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog/items
:
items
cq:WidgetCollection
Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog/items/items
:
Name: tab1
Type: cq:Panel
Properties:
title
String
Config
Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1
:
Name: items
Type: nt:unstructured
Properties:
Name: fieldLabel
Type: String
Value: Account ID
Name: fieldDescription
Type: String
Value: The account ID assigned by Google. Usually in the form UA-NNNNNN-N
Name: name
Type: String
Value: ./accountID
Name: validateOnBlur
Type: String
Value: true
Name: xtype
Type: String
Value: textfield
Copy /libs/cq/cloudserviceconfigs/components/configpage/body.jsp
to /apps/acs/analytics/components/googleanalyticspage/body.jsp
and change libs
to apps
on line 34 and make the script reference on line 79 a fully qualified path.
Create a new template under /apps/acs/analytics/templates/
:
acs/analytics/components/googleanalyticspage
googleanalytics
Google Analytics Configuration
/etc/cloudservices/googleanalytics(/.*)?
/apps/acs/analytics/templates/googleanalytics
cq/cloudserviceconfigs/templates/configpage
(on template node, not the jcr:content node)/etc/designs/cloudservices/googleanalytics
(on jcr:content)Create new component: /apps/acs/analytics/components/googleanalytics
.
Add the following content to googleanalytics.jsp
:
<%@page import="org.apache.sling.api.resource.Resource,
org.apache.sling.api.resource.ValueMap,
org.apache.sling.api.resource.ResourceUtil,
com.day.cq.wcm.webservicesupport.Configuration,
com.day.cq.wcm.webservicesupport.ConfigurationManager" %>
<%@include file="/libs/foundation/global.jsp" %><%
String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{});
ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class);
if(cfgMgr != null) {
String accountID = null;
Configuration cfg = cfgMgr.getConfiguration("googleanalytics", services);
if(cfg != null) {
accountID = cfg.get("accountID", null);
}
if(accountID != null) {
%>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '<%= accountID %>']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script><%
}
}
%>
This should output the custom markup based on the configuration properties.
Navigate to http://localhost:4502/miscadmin#/etc/cloudservices
and create a new page:
Google Analytics
googleanalytics
Go back in CRXDE Lite, and under /etc/cloudservices/googleanalytics
, add the following property to jcr:content
:
componentReference
String
acs/analytics/components/googleanalytics
Navigate to the newly created Service page ( http://localhost:4502/etc/cloudservices/googleanalytics.html
) and click the + to create a new config:
/etc/cloudservices/googleanalytics
My First GA Config
Choose Google Analytics Configuration and click Create.
Enter a Account ID, for example AA-11111111-1
. Click OK.
Navigate to a page and add the newly created configuration in the page properties, under the Cloud Services tab.
The page will have the custom markup added to it.