現在表示中:

SiteCatalyst モジュールをページコンポーネントにインクルード

ページテンプレートコンポーネント(body.jsp など)に ClientContext および SiteCatalyst 統合(クラウドサービスの一部)を読み込むには、2 つの JSP インクルードが必要です。どちらのインクルードでも JavaScript ファイルを読み込みます。

次のように、ClientContext は <body> タグの直後で、クラウドサービスは </body> タグの直前でインクルードします。

<body>
 <cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

....

 <cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
</body>

body 要素の直後に挿入する clientcontext スクリプトは、そのページに ClientContext 機能を追加します。

body 終了要素の直前に挿入する cloudservices スクリプトは、そのページに追加されるクラウドサービス設定に適用されます(そのページで複数のクラウドサービス設定を使用する場合も、ClientContext の JSP とクラウドサービスの JSP は一度だけ追加する必要があります)。

SiteCatalyst フレームワークをページに追加すると、次の例のように、cloudservices スクリプト(/libs/cq/analytics/components/sitecatalyst/sitecatalyst.jsp)が SiteCatalyst 関連 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 SiteCatalyst 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="http://daydocumentation.112.2o7.net/b/ss/daydocumentation/1/H.25--NS/1380120772954?cdp=3&amp;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>

Geometrixx Outdoors をはじめ、すべての AEM サンプルサイトにはこのコードが含まれています。

sitecatalystAfterCollect イベント

cloudservices スクリプトは、sitecatalystAfterCollect イベントを呼び出します。

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

このイベントは、ページの追跡が完了したことを示すために呼び出されます。このページに対して追加の追跡操作を実行する場合は、ドキュメント読み込みイベントやドキュメント準備完了イベントではなく、このイベントをリスンする必要があります。sitecatalystAfterCollect イベントを使用すると、衝突やその他の予期せぬ動作を回避できます。

注意:

/etc/clientlibs/foundation/sitecatalyst/sitecatalyst.js ライブラリには、SiteCatalyst s_code.js ファイルのコードが含まれています。

カスタムコンポーネント用の SiteCatalyst 追跡機能の実装

CQ コンポーネントが SiteCatalyst フレームワークとやり取りできるようにします。次に、SiteCatalyst がコンポーネントデータを追跡するようにフレームワークを設定します。

フレームワークを編集する際に、SiteCatalyst フレームワークとやり取りするコンポーネントがサイドキックに表示されます。このコンポーネントをフレームワークにドラッグすると、コンポーネントのプロパティが表示され、SiteCatalyst のプロパティにマップできるようになります(基本トラッキングのためのフレームワークのセットアップを参照)。

コンポーネントは、analytics という子ノードを持つ場合に SiteCatalyst フレームワークとやり取りできます。analytics ノードには以下のプロパティがあります。

  • cq:trackevents:コンポーネントが公開する CQ イベントを識別します(カスタムイベントを参照)。
  • cq:trackvars:SiteCatalyst のプロパティにマップされる CQ 変数に名前を付けます。
  • cq:componentName:サイドキックに表示されるコンポーネントの名前。
  • cq:componentGroup:コンポーネントを含むサイドキック内のグループ。

コンポーネントの JSP のコードによって、追跡を呼び出し、追跡対象のデータを定義する Javascript がページに追加されます。Javascript で使用されるイベント名とデータ名は、analytics ノードのプロパティの対応する値と一致している必要があります。

これらの data-tracking メソッドを使用すると、SiteCatalyst 統合モジュールはイベントとデータを記録するための SiteCatalyst への呼び出しを自動的に実行します。

例:topnav クリック数の追跡

SiteCatalyst がページ上部にあるナビゲーションリンクのクリック数を追跡するように、基盤となる topnav コンポーネントを拡張します。ナビゲーションリンクがクリックされると、SiteCatalyst はクリックされたリンクと、クリックされたリンクがあるページを記録します。

以降の手順をおこなうには、以下のタスクを終えている必要があります。

  • CQ アプリケーションの作成。
  • SiteCatalyst 設定と SiteCatalyst フレームワークの作成。

topnav コンポーネントのコピー

topnav コンポーネントを CQ アプリケーションにコピーします。この手順では、アプリケーションが CRXDE Lite で設定されている必要があります。

  1. /libs/foundation/components/topnav ノードを右クリックして、「コピー」をクリックします。

  2. アプリケーションフォルダーの下の Components フォルダーを右クリックして、「貼り付け」をクリックします。

  3. 「すべて保存」をクリックします。

topnav と SiteCatalyst フレームワークの統合

topnav コンポーネントを設定し、追跡するイベントとデータを定義するように JSP ファイルを編集します。

  1. topnav ノードを右クリックして、作成/ノードを作成をクリックします。次のプロパティ値を指定して、「OK」をクリックします。

    • 名前:analytics
    • タイプ:nt:unstructured
  2. 次のプロパティを analytics ノードに追加して、追跡するイベントに名前を付けます。

    • 名前:cq:trackevents
    • タイプ:String
    • 値:topnavClick
  3. 次のプロパティを analytics ノードに追加して、データ変数に名前を付けます。

    • 名前:cq:trackvars
    • タイプ:String
    • 値:topnavTarget、topnavLocation
  4. 次のプロパティを analytics ノードに追加して、サイドキックのコンポーネントに名前を付けます。

    • 名前:cq:componentName
    • タイプ:String
    • 値:topnav(追跡)
  5. 次のプロパティを analytics ノードに追加して、サイドキックのコンポーネントグループに名前を付けます。

    • 名前:cq:componentGroup
    • タイプ:String
    • 値:一般
  6. 「すべて保存」をクリックします。

  7. topnav.jsp ファイルを開きます。

  8. 要素内で、次の属性を追加します。

    onclick = "tracknav('<%= child.getPath() %>.html')" 
  9. ページの下部に以下の Javascript コードを追加します。

    <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>  
  10. 「すべて保存」をクリックします。

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>  

注意:

ClientContext のデータを追跡したくなる場合がしばしばあります。この情報を Javascript を使用して取得する方法については、ClientContext の値へのアクセスを参照してください。

サイドキックへの追跡コンポーネントの追加

フレームワークに追加できるように、SiteCatalyst を使用して追跡できるコンポーネントをサイドキックに追加します。

  1. SiteCatalyst 設定から SiteCatalyst フレームワークを開きます(http://localhost:4502/etc/cloudservices/sitecatalyst.html)。

  2. サイドキックでデザインボタンをクリックします。

  3. 「リンクトラッキング設定」領域で、「継承を設定」をクリックします。

  4. 許可されたコンポーネントリストで、「一般」セクションの「topnav(追跡)」を選択して、「OK」をクリックします。

  5. サイドキックを展開して編集モードに入ります。コンポーネントが一般グループに表示されるようになっています。

topnav コンポーネントのフレームワークへの追加

topnav コンポーネントを SiteCatalyst フレームワークにドラッグし、コンポーネントの変数とイベントを SiteCatalyst の変数とイベントにマップします(基本トラッキングのためのフレームワークのセットアップを参照)。

topnav コンポーネントが SiteCatalyst フレームワークと統合されました。コンポーネントをページに追加すると、上部ナビゲーションバーの項目のクリックによって、追跡データが SiteCatalyst に送信されます。

s.products データの SiteCatalyst への送信

コンポーネントは、SiteCatalyst に送信される s.products 変数用のデータを生成できます。s.products 変数に影響を与えるようにコンポーネントをデザインします。

  • 特定の構造の product という値を記録します。
  • SiteCatalyst フレームワークの SiteCatalyst 変数にマップできるように、product 値を持つデータメンバーを公開します。

SiteCatalyst の s.products 変数は、次の構文を使用します。

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

SiteCatalyst 統合モジュールは、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 内の空の文字列として送信されます。

注意:

product 値と関連付けられているイベントがない場合、SiteCatalyst はデフォルトで 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

e コマースモジュールには、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>

トラッキングコールのサイズの制限

一般的に、Web ブラウザーでは GET リクエストのサイズが制限されます。CQ の product と SKU の値はリポジトリのパスなので、複数の値を含む product 配列はリクエストサイズの制限を超えることがあります。そのため、コンポーネントで各 CQ_Analytics.record 関数product 配列内の項目数を制限する必要があります。追跡する必要がある項目数が制限を超える可能性がある場合は、複数の関数を作成します。

例えば、e コマースの submitorder コンポーネントでは、1 つのコール内の product 項目数が 4 に制限されています。カートに 5 つ以上の製品が含まれると、このコンポーネントは複数の CQ_Analytics.record 関数を生成します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー