データレイヤーを使用してイベントベースのルールを追跡する

Question

これは混乱を招くものです。ページの詳細を含むデータレイヤーを実装したとします。ページには2つの記事があり、クリックするたびにリダイレクトされます。ユーザーがカードをクリックすると、カード名（h1）の名前がツールに表示されます。データレイヤーを使用せずにこのシナリオを実装しました。 （Looking for custom script in Adobe DTM data element?）。

データ層を定義したコードは以下のとおりです。 DTMコンソールで私はデータ要素を作成し、データ層オブジェクトとマッピングしました。カード名は - DDO.pageData.cardnameです。また、イベントベースのルールを作成し、このデータ要素とマッピングします。ここで問題となるのは、1つの記事をクリックするたびに、1つのevarで両方の記事のh1を取っていることです。理想的にはクリックされている記事のみの価値があるはずです。提案してください。

<article class="mu-item"> 
 
    <a href="www.google.com" data-tags="test" target="_blank"> 
 
    <div> 
 
     <h1>This is a test text for tracking</h1> 
 
     <p>This was the day when the South Stand at Old Trafford, the stadium where he played around half of his 758 matches for United, was officially renamed in his honour before his beloved Reds took on Everton in the Barclays Premier League.<br><br> 
 
     </p> 
 
    </div> 
 
    </a> 
 
</article> 
 

 
<article class="mu-item"> 
 
    <a href="www.facebook.com" data-tags="{{displaytag_2}}" target="_blank"> 
 
    <div> 
 
     <h1>This is new card</h1> 
 
     <p>This was the day when the South Stand at Old Trafford.<br><br> 
 
     </p> 
 
    </div> 
 
    </a> 
 
</article> 
 

 
<a href="#" class="link"><span>some text</span></a> 
 

 
<script type="text/javascript"> 
 
DDO = {} // Data Layer Object Created 
 
var pageObj = {}; 
 
var pageDOM = $('.mu-item'); 
 
pageObj.DestinationURL = $(pageDOM).find('a').attr('href'); 
 
pageObj.cardName = $(pageDOM).find('h1').text(); 
 
    
 
DDO.pageData = { 
 
    "pageName": document.title, 
 
    "DestinationURL":pageObj.DestinationURL, 
 
    "cardname":pageObj.cardName 
 
    } 
 
</script> 
 
<script type="text/javascript">_satellite.pageBottom();</script>

Answer 1

あなたの問題は、複数のメニュー項目や見出しを持っているということです。すべての見出しを持つ配列を作成する必要があります（これは、クリックの正確な入力を得るのが難しくなります）。または、要素のクリック後にデータレイヤーを設定する必要があります。

しかし、私が指摘したように、あなたはこれを必要としない可能性が高いです。 CSSセレクタでイベントベースのクリックルールを実行すると、DTMが自動的に作成するデータ要素が利用できます。これは%this%と呼ばれ、クリックされたDOMノードが含まれています。 %this.textContent%で見出しの中のテキストを取得することができます（見出しにネストされた段落がありますが、これは有効なHTMLではないので、イベントルール設定でイベントをバブルアップする必要があります）。

Answer 2

他にも言及したように、h1の値が適切かどうかを知る唯一の方法は、クリックイベント中にキャプチャすることです。

私はcomments of your other question

で述べたように、[..] DTMは、現在のconfig領域に作成されたデータ要素

にthisへの参照を渡しません。この周りに方法はありません。 はでなければなりません。私はあなたの他の質問（ルール条件内のカスタムスクリプト）であなたを示したので、クリックイベント中にそれをキャプチャする必要があります。他の人が触れたように、データレイヤーを通過させることは、技術的には不要なステップです。実際にそれをすることに長所と短所がありますが、それは別の議論です。

あなたがそれを行うと判断されたと仮定すると...>データ要素ルールへ

移動し、は新しいデータ要素の作成]をクリックします。

名前あなたの使用する規約に従ったデータ要素。データレイヤでは、個人的にはデータレイヤの完全なパス（例： "DDO.pageData.cardName"

の場合は、「JSオブジェクト」を選択します。

パスのために、データ要素を保存するために完全なパスDDO.pageData.cardName

クリック保存データ要素を置きます。

次に、あなたのイベントベースのルールに行きます。 イベントタイプ（クリック）、要素タグまたはセレクタ（article.mu-item）

ルール条件では、カスタムjsコードボックスを追加するには、「データ>カスタム」を選択します。

ここでも、thisに基づいて情報を取得する必要があります。しかし、_satellite.setVar()を使用してオンザフライデータ要素を作成する代わりに、その値をデータレイヤーにプッシュします。

例：

var articleTitle = $(this).find('h1').text()||''; 
window.DDO 
&& 
window.DDO.pageData 
&& 
(window.DDO.pageData.cardName=articleTitle); 
return true; 

注：私はh1テキストを取得するjQueryの構文を使用しています。あなたの以前の質問に基づいて、その時に問題が発生していたので、私はあなたにvanilla jsバージョンを示しました。あなたがそれを整理したかどうかは分かりませんが、原則を得ることができます。 DLは、ページ上に低く配置されるのはなぜ

今すぐあなたのルールのフィールド%DDO.pageData.cardName%