例: エクスペリエンスビルダーサイトの Adobe Analytics および Lightning Locker
Adobe Analytics は、エクスペリエンスビルダーサイトのコンポーネントとやりとりするため、Lightning Locker で予期しない結果が生じる可能性があります。推奨される回避策は、head マークアップで JavaScript カスタムイベントを使用して Adobe Analytics を分離することです。これにより、Adobe Analytics は、そのリソースを直接読み込んだり参照したりせずにコンポーネントとやりとりできます。
サイトへの 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 のハッシュ部分は、タブコンポーネントのタブの変更を実装するためなどに使用されますが、ほとんど使用されることはありません。