Creazione di un Cloud Service personalizzato

Il set di Cloud Services predefinito può essere esteso con tipi di Cloud Service personalizzati. Questo consente di inserire tag personalizzati nella pagina in modo strutturato. Questo sarà utilizzato principalmente per fornitori di analisi di terze parti, ad esempio Google Analytics, heartbeat, ecc. Gli Cloud Services vengono ereditati dalle pagine padre alle pagine figlie, con la possibilità di interrompere l'ereditarietà a qualsiasi livello.

NOTA

Questa guida dettagliata per la creazione di un nuovo Cloud Service è un esempio che utilizza le Google Analytics. Tutto potrebbe non essere applicabile al caso di utilizzo.

  1. In CRXDE Lite, create un nuovo nodo sotto /apps:

    • Nome: acs
    • Tipo: nt:folder

  2. Crea un nuovo nodo in /apps/acs:

    • Nome: analytics
    • Tipo: sling:Folder

  3. Create 2 nuovi nodi in /apps/acs/analytics:

    • Nome: components
    • Tipo: sling:Folder

    e

    • Nome: templates
    • Tipo: sling:Folder

  4. Fare clic con il pulsante destro del mouse su /apps/acs/analytics/components. Selezionare Crea… seguito da Crea componente… La finestra di dialogo visualizzata consente di specificare:

    • Etichetta: googleanalyticspage
    • Titolo: Google Analytics Page
    • Super Type: cq/cloudserviceconfigs/components/configpage
    • Gruppo: .hidden

  5. Fare clic due volte su Next e specificare:

    • Elementi padre consentiti: acs/analytics/templates/googleanalytics

    Fare clic due volte su Next e fare clic su OK.

  6. Aggiungi una proprietà a googleanalyticspage:

    • Nome: cq:defaultView
    • Valore: html

  7. Create un nuovo file denominato content.jsp in /apps/acs/analytics/components/googleanalyticspage, con il seguente contenuto:

    <%@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>

  8. Crea un nuovo nodo in /apps/acs/analytics/components/googleanalyticspage/:

    • Nome: dialog

    • Tipo: cq:Dialog

    • Proprietà:

      • Nome: title
      • Tipo: String
      • Valore: Google Analytics Config
      • Nome: xtype
      • Tipo: String
      • Valore: dialog

  9. Crea un nuovo nodo in /apps/acs/analytics/components/googleanalyticspage/dialog:

    • Nome: items

    • Tipo: cq:Widget

    • Proprietà:

      • Nome: xtype
      • Tipo: String
      • Valore: tabpanel

  10. Crea un nuovo nodo in /apps/acs/analytics/components/googleanalyticspage/dialog/items:

    • Nome: items
    • Tipo: cq:WidgetCollection

  11. Crea un nuovo nodo in /apps/acs/analytics/components/googleanalyticspage/dialog/items/items:

    • Nome: tab1

    • Tipo: cq:Panel

    • Proprietà:

      • Nome: title
      • Tipo: String
      • Valore: Config

  12. Crea un nuovo nodo in /apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1:

    • Nome: items

    • Tipo: nt:unstructured

    • Proprietà:

      • Nome: fieldLabel

      • Tipo: Stringa

      • Valore: ID account

      • Nome: fieldDescription

      • Tipo: String

      • Valore: The account ID assigned by Google. Usually in the form UA-NNNNNN-N

      • Nome: name

      • Tipo: String

      • Valore: ./accountID

      • Nome: validateOnBlur

      • Tipo: String

      • Valore: true

      • Nome: xtype

      • Tipo: String

      • Valore: textfield

  13. Copiare /libs/cq/cloudserviceconfigs/components/configpage/body.jsp in /apps/acs/analytics/components/googleanalyticspage/body.jsp e cambiare libs in apps alla riga 34 e rendere il riferimento script alla riga 79 un percorso completo.

  14. Create un nuovo modello in /apps/acs/analytics/templates/:

    • con Tipo di risorsa = acs/analytics/components/googleanalyticspage
    • con Label = googleanalytics
    • con Titolo= Google Analytics Configuration
    • con allowPath = /etc/cloudservices/googleanalytics(/.*)?
    • con allowChildren = /apps/acs/analytics/templates/googleanalytics
    • con sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage (nel nodo del modello, non nel nodo jcr:content)
    • con cq:designPath = /etc/designs/cloudservices/googleanalytics (su jcr:content)

  15. Crea nuovo componente: /apps/acs/analytics/components/googleanalytics.

    Aggiungete il contenuto seguente a 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><%
    }
}
%>

    Questo deve restituire la marcatura personalizzata in base alle proprietà di configurazione.

  16. Andate a http://localhost:4502/miscadmin#/etc/cloudservices e create una nuova pagina:

    • Titolo: Google Analytics
    • Nome: googleanalytics

    Tornare indietro nel CRXDE Lite e, in /etc/cloudservices/googleanalytics, aggiungere la seguente proprietà a jcr:content:

    • Nome: componentReference
    • Tipo: String
    • Valore: acs/analytics/components/googleanalytics

  17. Passate alla pagina del servizio appena creata ( http://localhost:4502/etc/cloudservices/googleanalytics.html) e fate clic su + per creare una nuova configurazione:

    • Configurazione elemento padre: /etc/cloudservices/googleanalytics
    • Titolo: My First GA Config

    Scegliere Configurazione Google Analytics e fare clic su Crea.

  18. Immettere un ID account, ad esempio AA-11111111-1. Fai clic su OK.

  19. Passare a una pagina e aggiungere la configurazione appena creata nelle proprietà della pagina, nella scheda Cloud Services.

  20. Alla pagina verrà aggiunta la marcatura personalizzata.

In questa pagina