GTMカスタム変数は

Question

（序文を：私はここで何かを誤って伝えてきたなら、私が知っていると私は修正またはより多くの情報を提供しようとしてくださいので、私は、コーダはないです。）属性

我々はシリーズを持っていますリストの位置を含む多くの有用なメタデータが後に続く、親クラスとの順序付けられていないリストでユーザに提示される検索結果の数。このような何か：

<li class="article-panel" data-articletype="knowledgebase" data-list-position="1">...</li> 
<li class="article-panel" data-articletype="blog" data-list-position="2">...</li> 
<li class="article-panel" data-articletype="news" data-list-position="3">...</li> 

私たちはイベントのラベルや値としてクリックしたオブジェクトのリストの位置を追跡できるように、私たちは、イベントのメタデータを使用できるようにする一連の変数を作成しようとしています。私が実行している問題は、これらのオブジェクトのそれぞれが同じクラス名を使用するため、どのオブジェクトをクリックしても変数は常に最初の値セットだけを返すことです。

例を使用して

Variable configuration: 
DOM Element 
CSS Selector 
Element Selector = .article-panel 
Attribute Name = data-articletype 

、上記の変数は常に私がニュースやブログの記事をクリックした場合でも、「ナレッジベース」を返している（と同じことが、常に「1」を返すデータ・リストの位置のために行く。）

DOM内のそのクラスの最初のインスタンスのみを常に参照することなく、クリックしたオブジェクトの変数を返すように指定するにはどうすればよいですか？

Answer 1

すべてのヒントをありがとう。残念ながら、私たちは何をしても、GoogleアナリティクスにイベントをCSSツリーの上位の変数に登録させる方法を見つけることができませんでした。実際、ULレベルのトリガーが一貫して発射されるのを防ぐために、私たちの実装で何かが起きているようです。実際のインタラクションイベントにさらにメタデータタグを追加するだけで、クリックレベルで登録してCSSセレクタのトリガーを回避できるようになりました。

Answer 2

ちょうどそれがカスタム属性に置かれた値をキャッチする必要があるカスタム（データ層型）変数例えば：

gtm.element.dataset.articletype 

を作成します。

gtm.element.parentNode.dataset.articletype 

は親からのデータにアクセスするには：リンクタグは李タグに直接配置されている場合、あなたは、むしろこのような何かを使用する必要がある一方などのイベント

でそれを使用することができます。

Answer 3

まず、私はあなたがブリザードエンターテイメントの仕事をしているのを見ました。それは麻薬です。残念ながら、私が提示するソリューションはデベロッパーにとって親切ではありませんが、うまくいけば実装することができます。

私は、実際には、メインのブリザード・ウェブサイトの店頭でこれをテストすることができました。あなたが投稿したコードと全く同じではありませんが、ロジックは非常に似ているはずです！

カスタムHTMLタグを作成することをおすすめします。私はあなたがカスタムHTMLタグフィールドに貼り付けることができ、フォロースクリプトを書いた：

<script> 
(function ($) { 
    $(function() { 
     $('li.article-panel').click(function() { 
     var label = $(this).attr('data-list-position'); 
     dataLayer.push({ 
      'event': 'GAEvent', 
      'eventCat': 'Your Event Category', 
      'eventAction': 'Your Event Action', 
      'eventLabel': 'Item Position = ' + label, 
      'gaNonInt': false 
     }); 
     }); 
    }); 
}(jQuery)); 
</script> 

あなたはこのタグのページビュー、トリガを使用することができます。あなたのリストが存在するページでのみ発射するように設定します。あなたの<li>要素をクリックしてJQuery関数をアクティブにしない限り、タグはデータをプッシュしません。

これを行うには、イベントカテゴリ（eventCat）、イベントアクション（eventAction）、イベントラベル（eventLabel）などの変数を設定する必要があります。私の変数はおそらくあなたの変数とは異なるので、それらを入れ替える必要があります。

dataLayer配列（添付の関数にあります）の中に、各変数に付けられた文字列も変更する必要があります。したがって、eventCatを希望のイベントカテゴリ名に設定し、eventActionと同じ操作を行います。クリックしたアイテムのリストの位置を示すeventLabelを設定しました。GAの「Item Position =（item position＃）」と読み替える必要があります。一重引用符を削除しないように注意してください。彼らは必要です！

可能であれば、開発者に手伝ってもらうことをおすすめします。私は機能の各部分が何をしているのかを歩くことができますが、理解するのは難しいでしょう。それは、あなたが何か質問があれば教えて！乾杯！

Answer 4

クリックしたリスト要素のメタデータにアクセスする場合は、DOM型変数を使用しないでください。むしろ、組み込み変数セットのクリック変数、具体的には{{Click Element}}を有効にする必要があります。

これを行うと、{{Click Element}}は自動的に更新され、クリックされた要素が含まれます。これをHTMLタグまたはカスタムjavascript変数で使用して、{{Click Element}}.getAttribute('data-articletype')でデータ属性を取得することができます。