创建自定义Cloud Service

默认的Cloud Services集可以用自定义Cloud Service类型进行扩展。 这允许您以结构化方式将自定义标记注入页面。 这将主要用于第三方分析提供商,例如Google Analytics、Chartbeat等。 Cloud Services从父页面继承到子页面,能够在任何级别中中断继承。

注意

此创建新Cloud Service的分步指南是使用Google Analytics的示例。 所有内容可能不适用于您的使用案例。

  1. 在CRXDE Lite中,在/apps下创建新节点:

    • 名称: acs
    • 类型: nt:folder
  2. /apps/acs下创建新节点:

    • 名称: analytics
    • 类型: sling:Folder
  3. /apps/acs/analytics下新建2个节点:

    • 名称:组件
    • 类型: sling:Folder

    • 名称:模板
    • 类型: sling:Folder
  4. 右键单击/apps/acs/analytics/components。 选择​创建……​后跟​创建组件……​打开的对话框允许您指定:

    • 标签: googleanalyticspage
    • 标题: Google Analytics Page
    • 超级类型: cq/cloudserviceconfigs/components/configpage
    • : .hidden
  5. 单击​下一步​两次,然后指定:

    • 允许的父项: acs/analytics/templates/googleanalytics

    单击​Next​两次,然后单击​OK

  6. 将属性添加到googleanalyticspage:

    • 名称: cq:defaultView
    • 值: html
  7. /apps/acs/analytics/components/googleanalyticspage下新建一个名为content.jsp的文件,其中包含以下内容:

    <%@page contentType="text/html"
                pageEncoding="utf-8"%><%
    %><%@include file="/libs/foundation/global.jsp?lang=zh-Hans"%><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. /apps/acs/analytics/components/googleanalyticspage/下创建新节点:

    • 名称: dialog

    • 类型: cq:Dialog

    • 属性:

      • 名称: title
      • 类型: String
      • : Google Analytics Config
      • 名称: xtype
      • 类型: String
      • : dialog
  9. /apps/acs/analytics/components/googleanalyticspage/dialog下创建新节点:

    • 名称: items

    • 类型: cq:Widget

    • 属性:

      • 名称: xtype
      • 类型: String
      • : tabpanel
  10. /apps/acs/analytics/components/googleanalyticspage/dialog/items下创建新节点:

    • 名称: items
    • 类型: cq:WidgetCollection
  11. /apps/acs/analytics/components/googleanalyticspage/dialog/items/items下创建新节点:

    • 名称:tab1

    • 类型: cq:Panel

    • 属性:

      • 名称: title
      • 类型: String
      • : Config
  12. /apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1下创建新节点:

    • 名称:项目

    • 类型: nt:unstructured

    • 属性:

      • 名称: fieldLabel

      • 类型:字符串

      • :帐户ID

      • 名称: fieldDescription

      • 类型: String

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

      • 名称: name

      • 类型: String

      • : ./accountID

      • 名称: validateOnBlur

      • 类型: String

      • : true

      • 名称: xtype

      • 类型: String

      • : textfield

  13. /libs/cq/cloudserviceconfigs/components/configpage/body.jsp复制到/apps/acs/analytics/components/googleanalyticspage/body.jsp,将第34行的libs更改为apps,并使第79行的脚本引用成为完全限定的路径。

  14. /apps/acs/analytics/templates/下创建新模板:

    • 具有​资源类型 = acs/analytics/components/googleanalyticspage
    • 具有​标签 = googleanalytics
    • 具有​Title= Google Analytics Configuration
    • with allowedPath = /etc/cloudservices/googleanalytics(/.*?lang=zh-Hans)?
    • with allowedChildren = /apps/acs/analytics/templates/googleanalytics
    • 与​sling:resourceSuperType = cq/cloudserviceconfigs/templates/configpage(在模板节点上,而不是jcr:content节点上)
    • 具有​cq:designPath = /etc/designs/cloudservices/googleanalytics(在jcr:content上)
  15. 创建新组件:/apps/acs/analytics/components/googleanalytics

    将以下内容添加到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?lang=zh-Hans" %><%
    
    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><%
        }
    }
    %>
    

    这应根据配置属性输出自定义标记。

  16. 导航到http://localhost:4502/miscadmin#/etc/cloudservices并创建新页面:

    • 标题: Google Analytics
    • 名称: googleanalytics

    返回CRXDE Lite,在/etc/cloudservices/googleanalytics下,将以下属性添加到jcr:content:

    • 名称: componentReference
    • 类型: String
    • : acs/analytics/components/googleanalytics
  17. 导航到新创建的服务页面(http://localhost:4502/etc/cloudservices/googleanalytics.html)并单击​+​以创建新配置:

    • 父配置: /etc/cloudservices/googleanalytics
    • 标题: My First GA Config

    选择​Google Analytics配置​并单击​创建

  18. 输入​帐户ID,例如AA-11111111-1。 单击​确定

  19. 导航到页面,并在​Cloud Services​选项卡下的页面属性中添加新创建的配置。

  20. 页面中将添加自定义标记。

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now