Creación de un Cloud Service personalizado creating-a-custom-cloud-service
El conjunto predeterminado de Cloud Services se puede ampliar con tipos de Cloud Service personalizados. Esto le permite insertar marcado personalizado en la página de una manera estructurada. Esto será útil principalmente para proveedores de análisis de terceros, como Google Analytics, Chartbeat, etc. Los Cloud Services se heredan de las páginas principales a las páginas secundarias con la capacidad de romper la herencia en cualquier nivel.
-
En CRXDE Lite, cree un nuevo nodo en
/apps
:- Nombre:
acs
- Tipo:
nt:folder
- Nombre:
-
Cree un nuevo nodo en
/apps/acs
:- Nombre:
analytics
- Tipo:
sling:Folder
- Nombre:
-
Cree 2 nuevos nodos en
/apps/acs/analytics
:- Nombre: componentes
- Tipo:
sling:Folder
y
- Nombre: plantillas
- Tipo:
sling:Folder
-
Haga clic con el botón derecho en
/apps/acs/analytics/components
. Select Crear… seguido de Crear componente… El cuadro de diálogo que se abre le permite especificar:- Etiqueta:
googleanalyticspage
- Título:
Google Analytics Page
- Super Type:
cq/cloudserviceconfigs/components/configpage
- Grupo:
.hidden
- Etiqueta:
-
Haga clic en Siguiente dos veces y especifique:
- Principales permitidos:
acs/analytics/templates/googleanalytics
Haga clic en Siguiente dos veces y haga clic en OK.
- Principales permitidos:
-
Agregar una propiedad a
googleanalyticspage
:- Nombre:
cq:defaultView
- Valor:
html
- Nombre:
-
Cree un nuevo archivo con el nombre
content.jsp
under/apps/acs/analytics/components/googleanalyticspage
, con el siguiente contenido:code language-xml <%@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>
-
Cree un nuevo nodo en
/apps/acs/analytics/components/googleanalyticspage/
:-
Nombre:
dialog
-
Tipo:
cq:Dialog
-
Propiedades:
- Nombre:
title
- Tipo:
String
- Valor:
Google Analytics Config
- Nombre:
xtype
- Tipo:
String
- Valor:
dialog
- Nombre:
-
-
Cree un nuevo nodo en
/apps/acs/analytics/components/googleanalyticspage/dialog
:-
Nombre:
items
-
Tipo:
cq:Widget
-
Propiedades:
- Nombre:
xtype
- Tipo:
String
- Valor:
tabpanel
- Nombre:
-
-
Cree un nuevo nodo en
/apps/acs/analytics/components/googleanalyticspage/dialog/items
:- Nombre:
items
- Tipo:
cq:WidgetCollection
- Nombre:
-
Cree un nuevo nodo en
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items
:-
Nombre: tab1
-
Tipo:
cq:Panel
-
Propiedades:
- Nombre:
title
- Tipo:
String
- Valor:
Config
- Nombre:
-
-
Cree un nuevo nodo en
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1
:-
Nombre: items
-
Tipo:
nt:unstructured
-
Propiedades:
-
Nombre:
fieldLabel
-
Tipo: Cadena
-
Valor: ID de cuenta
-
Nombre:
fieldDescription
-
Tipo:
String
-
Valor:
The account ID assigned by Google. Usually in the form UA-NNNNNN-N
-
Nombre:
name
-
Tipo:
String
-
Valor:
./accountID
-
Nombre:
validateOnBlur
-
Tipo:
String
-
Valor:
true
-
Nombre:
xtype
-
Tipo:
String
-
Valor:
textfield
-
-
-
Copiar
/libs/cq/cloudserviceconfigs/components/configpage/body.jsp
a/apps/acs/analytics/components/googleanalyticspage/body.jsp
y cambiarlibs
aapps
en la línea 34 y haga de la referencia de script en la línea 79 una ruta completa. -
Cree una nueva plantilla en
/apps/acs/analytics/templates/
:- con Tipo de recurso =
acs/analytics/components/googleanalyticspage
- con Etiqueta =
googleanalytics
- con Título=
Google Analytics Configuration
- con allowedPath =
/etc/cloudservices/googleanalytics(/.*)?
- con allowedChildren =
/apps/acs/analytics/templates/googleanalytics
- con sling:resourceSuperType =
cq/cloudserviceconfigs/templates/configpage
(en el nodo de plantilla, no en el nodo jcr:content) - con cq:designPath =
/etc/designs/cloudservices/googleanalytics
(en jcr:content)
- con Tipo de recurso =
-
Crear nuevo componente:
/apps/acs/analytics/components/googleanalytics
.Añada el siguiente contenido a
googleanalytics.jsp
:code language-xml <%@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><% } } %>
Esto debería generar el marcado personalizado en función de las propiedades de configuración.
-
Vaya a
http://localhost:4502/miscadmin#/etc/cloudservices
y cree una nueva página:- Título:
Google Analytics
- Nombre:
googleanalytics
Vuelva al CRXDE Lite y debajo de
/etc/cloudservices/googleanalytics
, agregue la siguiente propiedad ajcr:content
:- Nombre:
componentReference
- Tipo:
String
- Valor:
acs/analytics/components/googleanalytics
- Título:
-
Vaya a la página de servicio recién creada (
http://localhost:4502/etc/cloudservices/googleanalytics.html
) y haga clic en el botón + para crear una configuración nueva:- Configuración principal:
/etc/cloudservices/googleanalytics
- Título:
My First GA Config
Choose Configuración de Google Analytics y haga clic en Crear.
- Configuración principal:
-
Escriba un ID de cuenta, por ejemplo
AA-11111111-1
. Haga clic en Aceptar. -
Vaya a una página y añada la configuración recién creada en las propiedades de página, en la sección Cloud Services pestaña .
-
Se agregará a la página el marcado personalizado.