Creating a Custom Cloud Service

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.

1. In CRXDE Lite, ceate a new node under /apps:

   • Name: acs
   • Type: nt:folder

2. Create a new node under /apps/acs:

   • Name: analytics
   • Type: sling:Folder

3. Create 2 new nodes under /apps/acs/analytics:

   • Name: components
   • Type: sling:Folder

   and

   • Name: templates
   • Type: sling:Folder

4. Right click on /apps/acs/analytics/components. Select Create… followed by Create Component… The dialog that opens allows you to specify:

   • Label: googleanalyticspage
   • Title: Google Analytics Page
   • Super Type: cq/cloudserviceconfigs/components/configpage
   • Group: .hidden

5. Click Next twice and specify:

   • Allowed Parents: acs/analytics/templates/googleanalytics

   Click Next twice and click OK.

6. Add a property to googleanalyticspage:

   • Name: cq:defaultView
   • Value: html

7. 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>
   

8. Create a new node under /apps/acs/analytics/components/googleanalyticspage/:

   • Name: dialog

   • Type: cq:Dialog

   • Properties:

     • Name: title
     • Type: String
     • Value: Google Analytics Config
     • Name: xtype
     • Type: String
     • Value: dialog

9. Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog:

   • Name: items

   • Type: cq:Widget

   • Properties:

     • Name: xtype
     • Type: String
     • Value: tabpanel

10. Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog/items:

    • Name: items
    • Type: cq:WidgetCollection

11. Create a new node under /apps/acs/analytics/components/googleanalyticspage/dialog/items/items:

    • Name: tab1

    • Type: cq:Panel

    • Properties:

      • Name: title
      • Type: String
      • Value: Config

12. 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

13. 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.

14. Create a new template under /apps/acs/analytics/templates/:

    • with Resource Type = acs/analytics/components/googleanalyticspage
    • with Label = googleanalytics
    • with Title= Google Analytics Configuration
    • with allowedPath = /etc/cloudservices/googleanalytics(/.*)?
    • with allowedChildren = /apps/acs/analytics/templates/googleanalytics
    • with sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage (on template node, not the jcr:content node)
    • with cq:designPath = /etc/designs/cloudservices/googleanalytics (on jcr:content)

15. 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.

16. Navigate to http://localhost:4502/miscadmin#/etc/cloudservices and create a new page:

    • Title: Google Analytics
    • Name: googleanalytics

    Go back in CRXDE Lite, and under /etc/cloudservices/googleanalytics, add the following property to jcr:content:

    • Name: componentReference
    • Type: String
    • Value: acs/analytics/components/googleanalytics

17. Navigate to the newly created Service page ( http://localhost:4502/etc/cloudservices/googleanalytics.html) and click the + to create a new config:

    • Parent Configuration: /etc/cloudservices/googleanalytics
    • Title: My First GA Config

    Choose Google Analytics Configuration and click Create.

18. Enter a Account ID, for example AA-11111111-1. Click OK.

19. Navigate to a page and add the newly created configuration in the page properties, under the Cloud Services tab.

20. The page will have the custom markup added to it.

Business.Adobe.com resources

Multichannel Communication Automated Onboarding Targeted Content Customer Communications Mobile Forms Content As A Service