Experience Cloud 開発者ガイド
j例: Aura サイトの Adobe Analytics および Lightning Locker
Adobe Analytics は、Aura サイトのコンポーネントとやりとりするため、Lightning Locker で予期しない結果が生じる可能性があります。推奨される回避策は、head マークアップで JavaScript カスタムイベントを使用して Adobe Analytics を分離することです。これにより、Adobe Analytics は、そのリソースを直接読み込んだり参照したりせずにコンポーネントとやりとりできます。
Aura サイトへの Adobe Analytics の追加
script タグを使用して、Adobe Analytics スクリプトおよび該当するイベントリスナーをサイトの head マークアップに追加します。
1<script>
2 document.addEventListener('analyticsEvent', function(e) {
3 //add logic here to tell your dataLayer about the event
4 //dataLayer.action = e.detail.action;
5 //dataLayer.label = e.detail.label;
6 //or map payload to an AA library event
7 });
8
9 document.addEventListener('analyticsViewChange', function() {
10 });
11</script>
12<script src="full-url-to-your-adobe-script" async></script>カスタムイベントの使用
Adobe Analytics とやりとりするコンポーネントで、detail プロパティを使用してカスタムイベントを実装します。このプロパティにより、データがイベントを介してリスナーに渡されて、head マークアップリスナーの dataLayer に対応付けられます。これにより、EventTarget を拡張する任意のリソースにカスタムイベントをディスパッチできます。
1document.dispatchEvent(new CustomEvent('analyticsEvent', {'detail': {action: 'click', label: 'Submitted Case'}}));Aura コンポーネントの追加イベントの実装
Adobe Analytics が Aura コンポーネントとやりとりする場合、forceCommunity:routeChange および aura:locationChange イベントも実装する必要があります。
forceCommunity:routeChange は、Lightning コンポーネントフレームワーク内のビューの変更を追跡します。
1<aura:component implements="forceCommunity:availableForAllPageTypes">
2 <aura:handler event="forceCommunity:routeChange" action="{!c.handleRouteChange}" />
3</aura:component>1handleRouteChange : function(component, event, helper) {
2 document.dispatchEvent(new Event('analyticsViewChange'));
3}aura:locationChange は、ブラウザのロケーションバーの URL のハッシュ部分が変更されたことを示します。ただし、場所 URL のハッシュ部分は、タブコンポーネントのタブの変更を実装するためなどに使用されますが、ほとんど使用されることはありません。