インストール
この記事では、Salesforce Commerce CloudにTealiumカートリッジをインストールする方法を説明します。
動作原理
Tealiumカートリッジを使用すると、マーケターは1行のコードと直感的なWebインターフェースを介してタグ要件を自分自身で管理できます。ITリソースは必要ありません。コード中心のアプローチを好む他のソリューションとは異なり、TealiumはJavaScriptの知識を必要としない使いやすいテンプレートを提供します。これにより、デジタルマーケティングベンダータグを簡単に追加、編集、または削除することができます。Tealiumは、マーケターがより迅速かつ効率的になるために設計されています。
Tealiumカートリッジの基本的なインストールでは、Tealiumは追加のカスタマイズなしで、コンテンツナビゲーション、検索トラッキング、製品表示、チェックアウト、注文トラッキングなど、豊富な訪問イベントデータを自動的に収集します。
Tealiumカートリッジは、サーバーサイドのCommerce Cloud実装からシンプルなTealiumクライアントサイドコンソールに多くの作業を移行することで、マーケターのベンダータグスイートのフルポテンシャルを引き出します。
TealiumカートリッジにはTealiumのサブスクリプションが必要です。
ユースケース
Tealiumカートリッジの基本的なインストールでは、追加のカスタマイズなしで、コンテンツナビゲーション、検索トラッキング、製品表示、チェックアウト、注文トラッキングなど、豊富な訪問イベントデータを自動的に収集します。
その後、Tealium iQは、ITリソースやCommerce Cloudストアフロントの変更を必要とせずに、シームレスで完全なベンダータグの統合を提供します。
セットアップ
次の手順に従って、TealiumカートリッジをCommerce Cloudストアフロントに統合します。これらの手順は、標準のSite Genesisストアフロントを基にしています。
- TealiumカートリッジをCommerce Cloud Studioワークスペースにインポートします:
- Commerce Cloud Studioを開きます。
- ファイル > インポート > 一般 > 既存のプロジェクトをワークスペースにインポートに移動します。
int_tealium
ディレクトリに移動します。- 完了をクリックします。
- カートリッジをサンドボックスにリンクするように求められた場合は、OKをクリックします。
- カスタムサイト構成をCommerce Cloud Business Managerにインポートします。
- Commerce Cloud Business Managerにログインします。
- 管理 > サイト開発 > インポートとエクスポートに移動します。
- アップロードをクリックします。
./int_tealium/metadata/Tealium_Meta.xml
ファイルを参照します。- ページの下部にある**«戻る**をクリックします。
- インポートをクリックします。
Tealium_Meta.xml
ファイルを選択します。- 次へをクリックします。
- インポートをクリックします。
- Commerce Cloud Business Managerを使用して、Tealiumカスタム構成を構成します。
- Tealiumを構成する各サイトにログインします:
- ページの上部にあるタブから正しいサイトを選択します。
- Merchant Tools > サイト構成 > カスタム構成 > Tealiumに移動します。
- 実装中に、Tealiumから入力する値が提供されます。
- Tealium Environmentフィールドには、
dev
、qa
、またはprod
を入力します(たとえば、サンドボックス/開発インスタンスにはdev
を使用します)。 - この統合を有効にするためにチェックボックスをオンにし、ページの下部近くにある適用をクリックします。
- TealiumカートリッジをEffective Cartridge Pathに追加します。
- ステージングサーバーのCommerce Cloud Business Managerにログインします。
- 各リストされたサイトとBusiness Managerサイトに対して管理 > サイト > サイトの管理に移動します:
- リストからサイトを選択します。
- 構成タブをクリックします。
- **Cartridges:**フィールドに
:int_tealium
を追加します。 - 適用をクリックします。
footer.isml
にTealiumフッターコードを追加します。- Commerce Cloud Studioを開きます。
/cartridge/templates/default/components/footer/pageFooter.isml
ストアフロントフッターファイルを開き、次のテキストをファイルに追加します:
<isinclude url="${URLUtils.url('Tealium_utag-RenderTealium',
'title', request.pageMetaData.title,
'pagecontexttype', ('pageContext' in this && !empty(pageContext)) ? ''+pageContext.type : null,
'pagecontexttitle', ('pageContext' in this && !empty(pageContext)) ? ''+pageContext.title : null,
'searchterm', request.httpParameterMap.q.stringValue,
'searchresultscount', (!empty(pdict.productSearch) ? ''+pdict.productSearch.count : null),
'productid', (!empty(pdict.product) && !empty(pdict.product.id) ? ''+pdict.product.id : null),
'pagecgid', request.httpParameterMap.cgid.stringValue,
'orderno', (!empty(pdict.order) ? pdict.order.orderNumber : null)
)}"/>
- 以下のCommerce Cloudテンプレート(
.isml
ファイル)を更新して、pageContext
オブジェクトを含めます:- Commerce Cloud Studioを開きます。
/cartridge/templates/default/cart/cart.isml
ストアフロントファイルを開き、テンプレートの上部に次の行を追加します:
<isscript>var pageContext={title:'Cart', type:'cart', ns:'cart'};</isscript>
/cartridge/templates/default/checkout/checkout.isml
ストアフロントファイルを開き、テンプレートの上部に次の行を追加します:
<isscript>var pageContext={title:'Checkout',type:'checkout',ns:'checkout'};</isscript>
/cartridge/templates/default/account/order/history.isml
ストアフロントファイルを開き、テンプレートの上部に次の行を追加します:
<isscript>var pageContext={title:'OrderHistory',type:'orderhistory',ns:'orderhistory'};</isscript>
構成
Tealiumの構成で適切なTealiumアカウントとTealiumプロファイルを構成してください。セットアップセクションのステップ3で構成したものと一致する必要があります。
その他のCommerce Cloudの構成は必要ありません。
Tealium iQを使用してマーケティングタグをカスタマイズする方法については、Tealiumアカウントマネージャーと相談してください。
カスタムコード
基本的な統合では、上記のセットアップ手順以外にカスタムコードは必要ありません。
互換性
最新のSFRAの更新前の旧バージョンのインストールについては、TealiumのGitHubのDemandwareリリースを参照してください。
外部インターフェース
Tealium iQコンソールを使用してマーケティングタグを管理できるようになりました。詳細については、Tealiumアカウントマネージャーにお問い合わせください。
プライバシー、支払い
Tealiumカートリッジは、従来のWebアナリティクスベンダーと同じレベルのユーザーの行動を収集するように設計されています。Tealiumカートリッジは、Commerce Cloudクライアントのプライバシーポリシーを完全に尊重するために、収集するデータのレベルを増減させることができます。
サポート
必要なサポートについては、Tealiumアカウントマネージャーにお問い合わせください。
テスト
カートリッジをデプロイした後、正しいデプロイメントを確認するために、ブラウザ内でストアフロントのページソースを表示するのが最も効果的なテストです。フッターには、utag_data
という変数に構成されたJSON構造が含まれているはずです。確認するために、この変数を検索してください。この下にutag.js
ファイルを含めるための追加のスクリプトもあります。
すべてのページのスクリプトブロックは、次の例のようになります。TealiumのACCOUNT
、PROFILE
、およびENVIRONMENT
の値は、セットアップのステップ3で構成したものと一致する必要があります。
<script type="text/javascript">
(function(a,b,c,d){
a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
b=document;c='script';d=b.createElement(c);
d.src=a;d.type='text/java'+c;d.async=1;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
})();
</script>
ホームページ
ホームページでは、データレイヤーは最小限です。
<script type="text/javascript">
var utag_data = {
"page_name": "SiteGenesis Online Store",
"page_type": "content",
"page_context_type": "storefront",
"page_context_title": "storefront",
"user_anonymous": "true",
"user_authenticated": "false",
"user_registered": "false",
"customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5"
};
</script>
検索結果ページ
このページでは、search_results
(count
)とsearch_term
(keyword
)の新しいデータポイントが追加されます。
<script type="text/javascript">
var utag_data = {
"page_name": "Sites-SiteGenesis-Site",
"page_type": "search",
"page_context_type": "search",
"page_context_title": "product search results",
"user_anonymous": "true",
"user_authenticated": "false",
"user_registered": "false",
"customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
"search_results": "7",
"search_term": "suit"
};
</script>
製品詳細ページ
このページでは、page_type
変数はproduct
に等しいです。product_XX
配列の値はすべて単一の文字列値です。
空の文字列値は、Commerce Cloudの製品カタログデータベースが不完全であることを示す場合があります。以下の値はサンプル値です。お使いのサイトでは、‘page_type’と’page_context_type’がおそらく同じになるでしょう。
<script type="text/javascript">
var utag_data = {
"page_name": "Platinum Blue Stripes Easy Care Fitted Shirt ",
"page_type": "product",
"page_context_type": "product",
"page_context_title": "platinum blue stripes easy care fitted shirt",
"user_anonymous": "true",
"user_authenticated": "false",
"user_registered": "false",
"customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
"product_id": [
"008884303989"
],
"product_sku": [
"null"
],
"product_name": [
"Platinum Blue Stripes Easy Care Fitted Shirt "
],
"product_brand": [
"null"
],
"product_category": [
"womens-clothing-tops"
],
"product_unit_price": [
"75.00"
]
};
</script>
カート表示ページ
このページでは、複数の製品固有のクーポンがカート内のすべてのアイテムに適用されます。割引は、同じ製品IDのすべてのアイテムの合計割引額を表します。
<script type="text/javascript">
var utag_data = {
"page_name": "Sites-SiteGenesis-Site",
"page_type": "checkout",
"page_context_type": "cart",
"page_context_title": "cart",
"user_anonymous": "true",
"user_authenticated": "false",
"user_registered": "false",
"customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
"coupon_codes": ["FIVEOFF"],
"product_id": [
"750518894553",
"sanyo-dp50747"
],
"product_sku": [
"null",
"null"
],
"product_name": [
"Charcoal Single Pleat Wool Suit",
"Sanyo 50\" LCD High Definition Television"
],
"product_brand": [
"null",
"Sanyo"
],
"product_category": [
"mens-clothing-suits",
"electronics-televisions-flat-screen"
],
"product_unit_price": [
"299.99",
"2996.25"
],
"product_quantity": [
"1",
"5"
],
"product_coupon_discount": [
"-5",
"-25"
],
"product_coupon_promo": [
"FIVEOFF",
"FIVEOFF"
]
};
注文「ありがとうございます」ページ
このページでは、注文に関する詳細が表示され、order_
で始まるすべての値が追加されます。このデータレイヤーには、購入されたすべてのアイテムも含まれます。product_
配列は、各配列内のアイテム数が同じであり、各アイテムが他の配列内の同じ位置のアイテムに対応している必要があります。
<script type="text/javascript">
var utag_data = {
"page_name": "confirmation",
"page_type": "checkout",
"page_context_type": "orderconfirmation",
"page_context_title": "order confirmation",
"user_anonymous": "true",
"user_authenticated": "false",
"user_registered": "false",
"customer_id": "abZAaNVUFZJNZz7PUAZrRjr1E5",
"order_id": "00000451",
"order_discount": "0.00",
"order_subtotal": "75.00",
"order_tax": "4.05",
"order_shipping": "5.99",
"order_payment_type": "BML",
"order_total": "85.04",
"order_currency": "USD",
"order_postal_code": "92868",
"product_name": [
"Platinum Blue Stripes Easy Care Fitted Shirt "
],
"product_brand": [
"null"
],
"product_unit_price": [
"75" ],
"product_sku": [
"null"
],
"product_id": [
"008884304023"
],
"product_category": [
"womens-clothing-tops"
],
"product_quantity": [
"1" ],
"product_coupon_discount": [
"0"
],
"product_coupon_promo": [
""
]
};
</script>
注文履歴ページ
注文履歴では、以前の注文や未処理の注文に関する詳細が表示されます。このデータレイヤーには、以前に購入したすべてのアイテムが含まれていないはずです。
<script type="text/javascript">
var utag_data = {
"page_name": "Sites-SiteGenesis-Site",
"page_type": "content",
"page_context_type": "orderhistory",
"page_context_title": "order history",
"user_anonymous": "false",
"user_authenticated": "true",
"user_registered": "true",
"customer_id": "adtkksWZjpbo9fdawQex7njjMb",
"customer_email": "xxxxxxxxxx@yahoo.com"
}; </script>
最終更新日 :: 2024年March月29日