Vous consultez actuellement l'aide de la version:

L’ensemble de services cloud par défaut peut être étendu à l’aide de types de service cloud personnalisés. Cela vous permet d’injecter un balisage personnalisé dans la page de manière structurée. Cela s’avérera particulièrement utile pour les fournisseurs de données analytiques tiers, tels que Google Analytics, Chartbeat, etc.
Les pages enfants héritent des services cloud des pages parents, avec la possibilité d’annuler l’héritage à n’importe quel niveau.

Remarque :

Google Analytics est utilisé comme exemple dans ce guide détaillé de création d’un service cloud. Il se peut que certains éléments ne soient pas applicables à votre scénario d’utilisation.

  1. Dans CRXDE Lite, créez un nœud sous /apps :

    • Nom : acs
    • Type : nt:folder
  2. Créez un nœud sous /apps/acs :

    • Nom : analytics
    • Type : sling:Folder
  3. Créez 2 nœuds sous /apps/acs/analytics :

    • Nom : components
    • Type : sling:Folder
    et
    • Nom : templates
    • Type : sling:Folder

  4. Cliquez avec le bouton droit de la souris sur /apps/acs/analytics/components. Sélectionnez Créer, suivi de Créer un composant. La boîte de dialogue qui s’ouvre alors vous permet de spécifier ce qui suit :

    • Libellé : googleanalyticspage
    • Titre : Google Analytics Page
    • Super-type : cq/cloudserviceconfigs/components/configpage
    • Groupe : .hidden
  5. Cliquez deux fois sur Suivant et indiquez :

    • Parents autorisés : acs/analytics/templates/googleanalytics

    Cliquez deux fois sur Suivant, puis cliquez sur OK.

  6. Ajoutez une propriété à googleanalyticspage :

    • Nom : cq:defaultView
    • Valeur : html 
  7. Créez un fichier nommé content.jsp sous /apps/acs/analytics/components/googleanalyticspage, avec le contenu suivant :

    <%@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. Créez un nœud sous /apps/acs/analytics/components/googleanalyticspage/ :

    • Nom : dialog
    • Type : cq:Dialog
    • Propriétés :
      • Nom : title
      • Type : String
      • Valeur : Google Analytics Config

       

      • Nom : xtype
      • Type : String
      • Valeur : dialog
  9. Créez un nœud sous /apps/acs/analytics/components/googleanalyticspage/dialog :

    • Nom : items
    • Type : cq:Widget
    • Propriétés :
      • Nom : xtype
      • Type : String
      • Valeur : tabpanel
  10. Créez un nœud sous /apps/acs/analytics/components/googleanalyticspage/dialog/items :

    • Nom : items
    • Type : cq:WidgetCollection
  11. Créez un nœud sous /apps/acs/analytics/components/googleanalyticspage/dialog/items/items :

    • Nom : tab1
    • Type : cq:Panel
    • Propriétés :
      • Nom : title
      • Type : String
      • Valeur :Config
  12. Créez un nœud sous /apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1 :

    • Nom : items
    • Type : nt:unstructured
    • Propriétés :
      • Nom :fieldLabel
      • Type : String
      • Valeur : ID de compte

       

      • Nom : fieldDescription
      • Type : String
      • Valeur : ID de compte affecté par Google. Généralement sous la forme UA-NNNNNN-N

       

      • Nom : name
      • Type : String
      • Valeur : ./accountID

       

      • Nom : validateOnBlur
      • Type : String
      • Valeur : true

       

      • Nom : xtype
      • Type : String
      • Valeur : textfield
  13. Copiez /libs/cq/cloudserviceconfigs/components/configpage/body.jsp sur /apps/acs/analytics/components/googleanalyticspage/body.jsp, remplacez libs par apps à la ligne 34 et faites de la référence de script à la ligne 79 un chemin d’accès entièrement qualifié.

  14. Créez un modèle sous /apps/acs/analytics/templates/ :

    • avec Resource Type = acs/analytics/components/googleanalyticspage
    • avec Label =googleanalytics
    • avec TitleGoogle Analytics Configuration
    • avec allowedPath = /etc/cloudservices/googleanalytics(/.*)?
    • avec allowedChildren = /apps/acs/analytics/templates/googleanalytics
    • avec sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage (sur le nœud template et non sur le nœud jcr:content)
    • avec cq:designPath = /etc/designs/cloudservices/googleanalytics (sur jcr:content)
  15. Créez un composant : /apps/acs/analytics/components/googleanalytics.

    Ajoutez le contenu suivant à 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' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script><%
        }
    }
    %>

    Cela devrait générer le balisage personnalisé sur la base des propriétés de configuration.

  16. Accédez à http://localhost:4502/miscadmin#/etc/cloudservices et créez une page :

    • Titre : Google Analytics
    • Nom : googleanalytics
    Revenez dans CRXDE Lite et, sous/etc/cloudservices/googleanalytics, ajoutez la propriété suivante à jcr:content :
    • Nom : componentReference
    • Type : String
    • Valeur : acs/analytics/components/googleanalytics
  17. Accédez à la page Service qui vient d’être créée (http://localhost:4502/etc/cloudservices/googleanalytics.html) et cliquez ensuite sur le signe + pour créer une configuration :

    • Configuration du parent : /etc/cloudservices/googleanalytics
    • Titre : My First GA Config 
    Sélectionnez Google Analytics Configuration, puis cliquez sur Créer.
  18. Saisissez un ID de compte ; par exemple, AA-11111111-1. Cliquez sur OK.

  19. Accédez à une page et ajoutez la nouvelle configuration dans les propriétés de la page, sous l’onglet Services cloud.

  20. Le balisage personnalisé est ajouté à la page.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne