GTMで要素テキストを取得カスタムJavaScript変数

Question

私はすべて同じクラス名を持つ2つのリンクグループを持っていますが、唯一の違いは、 クリックしたリンクのテキストを取得し、GTM経由でGAに渡す必要があります。

<div class="item-set"> 
    <header>Section Title One</header> 
    <section class="products"> 
    <div class="list"> 
     <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a> 
    </div> 
    <div class="list"> 
     <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a> 
    </div> 
    <div class="list"> 
     <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a> 
    </div> 
    </section> 
</div> 
<div class="item-set"> 
    <header>Section Title Two</header> 
    <section class="products"> 
    <div class="list"> 
     <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a> 
    </div> 
    <div class="list"> 
     <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a> 
    </div> 
    <div class="list"> 
     <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a> 
    </div> 
    </section> 
</div> 

私はjavascriptの変数

function() { 
    $('section.products div.list').click(function() { 
    return $(this).closest('.item-set').find('header').text(); 
    }); 
} 

カスタムを作成している。しかし、私は（または全ての）期待通りがbleepものが機能していません。それは "undefined"を返します。

ご協力いただきまして誠にありがとうございます。

Answer 1

あなたはJS変数にclickイベントにバインドするべきではありません。あなたがあなたの目標を達成するための正しい方法はある値のみ

を受信するためのGTM でJS変数を使用する必要があります：あなたはすでにそれを持っている場合（要素をクリックして、組み込みの有効化変数）

1、あなたはこれを省略することができますステップ）

2）あなたがあなたのリンクをクリックしたときに発生しますトリガーを作成します スクリーンショットの CSSセレクタは.item-set .list a

です0

3）JS変数 コードの作成です：function() { return $({{Click Element}}.closest('.item-set')).find('header').text(); } 3）GA ここ あなたの変数フォームのステップに使用できる3 {{Click List Header}}

Answer 2

おそらく、あなたは関数からreturn $(this).closest('.item-set').find('header').text();をキャプチャ/格納していませんか？

たとえば、すぐに関数を呼び出してdivをクリックすると、<header>のテキストがコンソールに記録されます。

(function() { 
 
    $('section.products div.list').click(function(e) { 
 
     e.preventDefault(); // to prevent the default action of the click 
 
     console.log($(this).closest('.item-set').find('header').text()); 
 
     return $(this).closest('.item-set').find('header').text(); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item-set"> 
 
    <header>Section Title One</header> 
 
    <section class="products"> 
 
     <div class="list"> 
 
      <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a> 
 
     </div> 
 
     <div class="list"> 
 
      <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a> 
 
     </div> 
 
     <div class="list"> 
 
      <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a> 
 
     </div> 
 
    </section> 
 
</div> 
 
<div class="item-set"> 
 
    <header>Section Title Two</header> 
 
    <section class="products"> 
 
     <div class="list"> 
 
      <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a> 
 
     </div> 
 
     <div class="list"> 
 
      <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a> 
 
     </div> 
 
     <div class="list"> 
 
      <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a> 
 
     </div> 
 
    </section> 
 
</div>