Google Tag Manager の変数 では、タイプ(型?) として、
カスタムjavascript を定義できます。
カスタムjavascript を書く機会があり、カスタムjavascript内で、
クリックされた要素自身を取得したかったのですが、this が書けず、
クリックされた要素を取得する方法を調べたので記載しておきます。
一般的なjavascript に慣れていると、
Google Tag Manager の お作法知らないうちは、結構とっつきにくく感じるのかなと思いました。1
慣れてしまえば頗る便利なのかと思います。
参考
作成したもの
以下、Google Tag Manager で、Google Analytics のイベント送信時、
カテゴリ取得のために設定したカスタムjavascript になります。
{{Click Element}} で、リンククリック トリガーを設定したリンク自身のオブジェクトが取得できます。
function() {
// ---------------------------------------------------------------
// data-category属性が設定されている場合は、優先的に返す
// ---------------------
var elem = {{Click Element}};
var categoryValue = $(elem).attr("data-category");
if (categoryValue != null) {
return categoryValue;
}
// ---------------------------------------------------------------
// data-category属性が未設定の場合は、外部リンクか内部リンクかで、返却値をコントロール
// ---------------------
var href = $(elem).attr("href");
if (typeof(href) != 'string') {
return "unknown";
} else if (href.indexOf(location.protocol + '//' + location.host) == 0) {
return "blog_post";
} else if (href.match(/^https?:\/\//)) {
return "external_ref";
} else {
return "blog_post";
}
}
注意点として、{{Click Element}} 自体を組み込み変数 として設定しないと、
カスタム javascript のプレビューの時点で、未定義エラーとなります。
カスタムjavascript を初めて書いて思った感想
カスタムHTML内にGoogle Analytics の イベント仕込み用のjavascriptを書けたりはせず、
別途タグとして仕込む必要がありました。慣れないと仕込めないなら、直接HTMLに記述したほうが早いとかなりそうですが、
「イベント発動のトリガーを仕込む」ということに慣れてしまえば、この作りはこの作りで書いてて心地いいのかなと思いました。
「クリックされた要素を取得」で悩みましたが、無事実装できてよかったです。
以上です。
コメント