將Adobe Analytics追蹤新增至元件 adding-adobe-analytics-tracking-to-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined

在頁面元件中包含Adobe Analytics模組 including-the-adobe-analytics-module-in-a-page-component

頁面範本元件（例如head.jsp, body.jsp）需要JSP include才能載入ContextHub和Adobe Analytics整合(這是Cloud Service的一部分)。所有功能都包含載入JavaScript檔案。

ContextHub專案應直接包含在<head>標籤下方，而Cloud Service應包含在<head>中及</body>區段之前；例如：

<head>
   <sling:include path="contexthub" resourceType="granite/contexthub/components/contexthub" />
...
   <cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
...
</head>
<body>
...
    <cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
</body>

您在<head>元素之後插入的contexthub指令碼會將ContextHub功能新增至頁面。

您在<head>和<body>區段中新增的cloudservices指令碼會套用至新增至頁面的雲端服務設定。 (如果頁面使用多個Cloud Service組態，您只能包含一次ContextHub jsp和Cloud Service jsp)。

將Adobe Analytics架構新增至頁面時，cloudservices指令碼會產生與Adobe Analytics相關的JavaScript和對使用者端資料庫的參照，類似於以下範例：

<div class="sitecatalyst cloudservice">
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/util.js"></script>
<script type="text/javascript" src="/content/geometrixx-outdoors/_jcr_content/analytics.sitecatalyst.js"></script>
<script type="text/javascript" src="/etc/clientlibs/mac/mac-sc.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/sitecatalyst/plugins.js"></script>
<script type="text/javascript">
<!--
CQ_Analytics.Sitecatalyst.frameworkComponents = ['foundation/components/page'];
/**
 * Sets Adobe Analytics variables accordingly to mapped components. If <code>options</code>
 * object is provided only variables matching the options.componentPath are set.
 *
 * @param {Object} options Parameter object from CQ_Analytics.record() call. Optional.
 */
CQ_Analytics.Sitecatalyst.updateEvars = function(options) {
    this.frameworkMappings = [];
 this.frameworkMappings.push({scVar:"pageName",cqVar:"pagedata.title",resourceType:"foundation/components/page"});
    for (var i=0; i<this.frameworkMappings.length; i++){
  var m = this.frameworkMappings[i];
  if (!options || options.compatibility || (options.componentPath == m.resourceType)) {
   CQ_Analytics.Sitecatalyst.setEvar(m);
  }
    }
}

CQ_Analytics.CCM.addListener("storesinitialize", function(e) {
 var collect = true;
    var lte = s.linkTrackEvents;
    s.pageName="content:geometrixx-outdoors:en";
    CQ_Analytics.Sitecatalyst.collect(collect);
    if (collect) {
  CQ_Analytics.Sitecatalyst.updateEvars();
     /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
     var s_code=s.t();if(s_code)document.write(s_code);
     s.linkTrackEvents = lte;
     if(s.linkTrackVars.indexOf('events')==-1){delete s.events};
     $CQ(document).trigger("sitecatalystAfterCollect");
    }
});
//-->
</script>
<script type="text/javascript">
<!--
if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!-'+'-')
//-->
</script>
<noscript><img src="https://daydocumentation.112.2o7.net/b/ss/daydocumentation/1/H.25--NS/1380120772954?cdp=3&gn=content%3Ageometrixx-outdoors%3Aen" height="1" width="1" border="0" alt=""/></noscript>
<span data-tracking="{event:'pageView', values:{}, componentPath:'foundation/components/page'}"></span>
<div id="cq-analytics-texthint" style="background:white; padding:0 10px; display:none;">
 <h3 class="cq-texthint-placeholder">Component clientcontext is missing or misplaced.</h3>
</div>
<script type="text/javascript">
$CQ(function(){
 if( CQ_Analytics &&
  CQ_Analytics.ClientContextMgr &&
  !CQ_Analytics.ClientContextMgr.isConfigLoaded )
  {
   $CQ("#cq-analytics-texthint").show();
  }
});
</script>
</div>

所有AEM範例網站(例如Geometrixx Outdoors)都會包含此程式碼。

sitecatalystAfterCollect事件 the-sitecatalystaftercollect-event

cloudservices指令碼會觸發sitecatalystAfterCollect事件：

$CQ(document).trigger("sitecatalystAfterCollect");

觸發此事件即表示頁面追蹤已完成。如果您在此頁面上執行其他追蹤作業，您應該監聽此事件，而不是檔案載入或檔案就緒事件。使用sitecatalystAfterCollect事件可避免衝突或其他無法預測的行為。

NOTE

/libs/cq/analytics/clientlibs/sitecatalyst/sitecatalyst.js資料庫包含Adobe Analytics s_code.js檔案的程式碼。

對自訂元件實作Adobe Analytics追蹤 implementing-adobe-analytics-tracking-for-custom-components

啟用您的AEM元件，以與Adobe Analytics架構互動。然後，設定您的架構，讓Adobe Analytics追蹤元件資料。

當您編輯框架時，與Adobe Analytics框架互動的元件會顯示在Sidekick中。將元件拖曳至框架後，元件屬性隨即顯示，然後您就可以使用Adobe Analytics屬性加以對應。（請參閱設定基本追蹤的架構。）

當元件具有名為analytics的子節點時，元件可以與Adobe Analytics架構互動。 analytics節點有下列屬性：

cq:trackevents：識別元件公開的CQ事件。（請參閱自訂事件）。
cq:trackvars：為對應至Adobe Analytics屬性的CQ變數命名。
cq:componentName：以Sidekick顯示的元件名稱。
cq:componentGroup：Sidekick中包含元件的群組。

元件JSP中的程式碼會將JavaScript新增至觸發追蹤的頁面，並定義要追蹤的資料。 JavaScript中使用的事件名稱和資料名稱必須符合analytics節點屬性的對應值。

在頁面載入時，使用data-tracking屬性追蹤事件資料。（請參閱追蹤頁面載入上的自訂事件。）
使用CQ_Analytics.record函式可在使用者與頁面功能互動時追蹤事件資料。（請參閱在頁面載入後追蹤自訂事件。）

使用這些資料追蹤方法時，Adobe Analytics整合模組會自動執行Adobe Analytics呼叫，以記錄事件和資料。

範例：追蹤topnav點按 example-tracking-topnav-clicks

擴充基礎topnav元件，讓Adobe Analytics可追蹤頁面頂端導覽連結的點按次數。當導覽連結經點按時，Adobe Analytics會記錄該連結經點按，以及經點按的頁面。

下列程式要求您已執行下列工作：

已建立CQ應用程式。
已建立Adobe Analytics設定和Adobe Analytics架構。

複製topnav元件 copy-the-topnav-component

將topnav元件複製到CQ應用程式。此程式要求您的應用程式必須以CRXDE Lite設定。

以滑鼠右鍵按一下/libs/foundation/components/topnav節點，然後按一下[複製]。
以滑鼠右鍵按一下應用程式資料夾下方的「元件」資料夾，然後按一下「貼上」。
按一下「儲存全部」。

將topnav與Adobe Analytics框架整合 integrating-topnav-with-the-adobe-analytics-framework

設定topnav元件並編輯JSP檔案，以定義追蹤事件和資料。

以滑鼠右鍵按一下topnav節點，然後按一下「建立>建立節點」。指定下列屬性值，然後按一下「確定」：
- 名稱：analytics
- 類型：nt:unstructured
將下列屬性新增至分析節點，讓您可以將追蹤事件命名為：
- 名稱：cq：trackevents
- 型別：字串
- 值： topnavClick
將下列屬性新增至Analytics節點，讓您可以將資料變數命名為：
- 名稱：cq：trackvars
- 型別：字串
- 值： topnavTarget，topnavLocation
將下列屬性新增至Analytics節點，為元件命名，以供Sidekick：
- 名稱：cq：componentName
- 型別：字串
- 值： topnav （追蹤）
將以下屬性新增到Analytics節點，以命名要Sidekick的元件群組：
- 名稱：cq：componentGroup
- 型別：字串
- 值：一般
按一下「儲存全部」。
開啟topnav.jsp檔案。

在元素中，新增下列屬性：

code language-xml
`onclick = "tracknav('<%= child.getPath() %>.html')"`

在頁面底部，新增下列JavaScript程式碼：

code language-xml

code language-xml
`<script type="text/javascript"> function tracknav(target) { if (CQ_Analytics.Sitecatalyst) { CQ_Analytics.record({ event: 'topnavClick', values: { topnavTarget: target, topnavLocation:'<%=currentPage.getPath() %>.html' }, componentPath: '<%=resource.getResourceType()%>' }); } } </script>`

<script type="text/javascript">
    function tracknav(target) {
            if (CQ_Analytics.Sitecatalyst) {
                CQ_Analytics.record({
                    event: 'topnavClick',
                    values: {
                        topnavTarget: target,
                        topnavLocation:'<%=currentPage.getPath() %>.html'
                    },
                    componentPath: '<%=resource.getResourceType()%>'
                });
            }
    }
</script>

按一下「儲存全部」。

topnav.jsp檔案的內容應該顯示如下：

<%@page session="false"%><%--
  Copyright 1997-2008 Day Management AG
  Barfuesserplatz 6, 4001 Basel, Switzerland
  All Rights Reserved.

  This software is the confidential and proprietary information of
  Day Management AG ("Confidential Information"). You shall not
  disclose such Confidential Information and shall use it only in
  accordance with the terms of the license agreement you entered into
  with Day.

  ==============================================================================

  Top Navigation component

  Draws the top navigation

--%><%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
        com.day.text.Text,
        com.day.cq.wcm.api.PageFilter,
        com.day.cq.wcm.api.Page,
        com.day.cq.commons.Doctype,
        org.apache.commons.lang3.StringEscapeUtils" %><%

    // get starting point of navigation
    long absParent = currentStyle.get("absParent", 2L);
    String navstart = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);

    //if not deep enough take current node
    if (navstart.equals("")) navstart=currentPage.getPath();

    Resource rootRes = slingRequest.getResourceResolver().getResource(navstart);
    Page rootPage = rootRes == null ? null : rootRes.adaptTo(Page.class);
    String xs = Doctype.isXHTML(request) ? "/" : "";
    if (rootPage != null) {
        Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
        while (children.hasNext()) {
            Page child = children.next();
            %><a onclick = "tracknav('<%= child.getPath() %>.html')"  href="<%= child.getPath() %>.html"><%
            %><img alt="<%= StringEscapeUtils.escapeXml(child.getTitle()) %>" src="<%= child.getPath() %>.navimage.png"<%= xs %>></a><%
        }
    }
%><script type="text/javascript">
    function tracknav(target) {
            if (CQ_Analytics.Sitecatalyst) {
                CQ_Analytics.record({
                    event: 'topnavClick',
                    values: {
                        topnavTarget:target,
                        topnavLocation:'<%=currentPage.getPath() %>.html'
                    },
                    componentPath: '<%=resource.getResourceType()%>'
                });
            }
    }
</script>

NOTE

通常需要從ContextHub追蹤資料。如需有關使用JavaScript來取得此資訊的資訊，請參閱存取ContextHub中的值。

將追蹤元件新增至Sidekick adding-the-tracking-component-to-sidekick

將啟用Adobe Analytics追蹤的元件新增至Sidekick，以便您將它們新增至您的架構。

從Adobe Analytics設定開啟Adobe Analytics架構。 (http://localhost:4502/etc/cloudservices/sitecatalyst.html)
在Sidekick上，按一下「設計」按鈕。
在連結追蹤設定區域中，按一下設定繼承。
在「允許的元件」清單中，選取「一般」段落中的topnav （追蹤），然後按一下「確定」。
展開Sidekick以進入編輯模式。元件現在可在「一般」群組中使用。

將topnav元件新增至您的框架 adding-the-topnav-component-to-your-framework

將topnav元件拖曳至Adobe Analytics架構，並將元件變數和事件對應至Adobe Analytics變數和事件。（請參閱設定基本追蹤的架構。）

chlimage_1-1

Topnav元件現在已與Adobe Analytics框架整合。將元件新增至頁面時，按一下頂端導覽列中的專案會導致將追蹤資料傳送至Adobe Analytics。

將s.products資料傳送至Adobe Analytics sending-s-products-data-to-adobe-analytics

元件可產生傳送至Adobe Analytics之s.products變數的資料。設計您的元件以貢獻給s.products變數：

記錄特定結構的名為product的值。
公開product值的資料成員，以便能夠在Adobe Analytics架構中以Adobe Analytics變數進行對應。

Adobe Analytics s.products變數會使用以下語法：

s.products="category;product;quantity;price;eventY={value}|eventZ={value};evarA={value}|evarB={value}"

Adobe Analytics整合模組使用AEM元件產生的product值來建構s.products變數。 AEM元件在JavaScript中產生的product值是具有以下結構的值陣列：

"product": [{
    "category": "",
    "sku"     : "path to product node",
    "quantity": quantity,
    "price"   : price,
    "events   : {
      "eventName1": "eventValue1",
      "eventName_n": "eventValue_n"
    }
    "evars"   : {
      "eVarName1": "eVarValue1",
      "eVarName_n": "eVarValue_n"
    }
}]

product值中省略資料專案時，會在s.products中以空字串形式傳送。

NOTE

當沒有事件與產品值相關聯時，Adobe Analytics預設會使用prodView事件。

元件的analytics節點必須使用cq:trackvars屬性公開變數名稱：

product.category
product.sku
product.quantity
product.price
product.events.eventName1
product.events.eventName_n
product.evars.eVarName1
product.evars.eVarName_n

電子商務模組提供數個會產生s.products變數資料的元件。例如，submitorder元件(http://localhost:4502/crx/de/index.jsp#/libs/commerce/components/submitorder/submitorder.jsp)會產生與下列範例類似的JavaScript：

<script type="text/javascript">
    function trackCartPurchase() {
        if (CQ_Analytics.Sitecatalyst) {
            CQ_Analytics.record({
                "event": ["productsCartPurchase"],
                "values": {
                    "product": [
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/1",
                            "quantity": 3,
                            "price"   : 179.7,
                            "evars"   : {
                                "childSku": "/path/to/prod/1/green/xs",
                                "size"    : "XS"
                            }
                        },
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/2",
                            "quantity": 10,
                            "price"   : 150,
                            "evars"   : {
                                "childSku": "/path/to/prod/2",
                                "size"    : ""
                            }
                        },
                        {
                            "category": "",
                            "sku"     : "/path/to/prod/3",
                            "quantity": 2,
                            "price"   : 102,
                            "evars"   : {
                                "childSku": "/path/to/prod/3/m",
                                "size"    : "M"
                            }
                        }
                    ]
                },
                "componentPath": "commerce/components/submitorder"
            });
            CQ_Analytics.record({
                "event": ["discountRedemption"],
                "values": {
                    "discount": "/path/to/discount/1 - /path/to/discount/2",
                    "product" : [{
                        "category": "",
                        "sku"     : "Promotional Discount",
                        "events"  : {"discountRedemption": 20.00}
                    }]
                },
                "componentPath": "commerce/components/submitorder"
            });
            CQ_Analytics.record({
                "event": ["cartPurchase"],
                "values": {
                    "orderId"       : "00e40e2d-13a2-4a00-a8ee-01a9ebb0bf68",
                    "shippingMethod": "overnight",
                    "paymentMethod" : "Amex",
                    "billingState"  : "NY",
                    "billingZip"    : "10458",
                    "product"       : [{"category": "", "sku": "", "quantity": "", "price": ""}]
                },
                "componentPath": "commerce/components/submitorder"
            });
        }
        return true;
    }
</script>

限制追蹤呼叫的大小 limiting-the-size-of-tracking-calls

一般而言，網頁瀏覽器會限制GET要求的大小。由於CQ產品和SKU值是存放庫路徑，因此包含多個值的產品陣列可能會超過請求大小限制。因此，您的元件應該限制每個CQ_Analytics.record function之product陣列中的專案數。如果必須追蹤的專案數量可能超過限制，請建立多個函式。

例如，電子商務submitorder元件將呼叫中product專案的數量限製為4。當購物車包含四個以上的產品時，它會產生多個CQ_Analytics.record功能。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2