Google Tag Manager × WordPress ウィジェットごとのクリック数を計測する

2024年4月28日

やりたいこと
準備
WordPressでウィジェットにユニークなCSSセレクタを設定する
Google Tag Managerで変数を設定する
Google Tag Managerで要素ごとにトリガーを設定する
Google Tag Managerで計測用のタグを設定する
Google Analyticsでカスタムディメンション、カスタム指標を設定する
Looker Studioでデータソースを更新する
Looker Studioでウィジェットごとのクリック回数を表示する
参考

やりたいこと

WordPressのウィジェットがそれぞれ何回クリックされたのかを計測したい。

以前の記事の内容と重複する部分が大半です。

以下の記事の内容を実施済みの場合はトリガー設定以降を実施してください。

Google Tag Manager × WordPress ウィジェットごとの表示数を計測する

やりたいこと Wordpressのウィジェットがそれぞれ何回表示されたのかを計測したい。準備・Wordpress ...

https://aimatomech.com/post-5157

準備

・Wordpress側で各ウィジェットにユニークなCSSセレクタを設定する(classやid等)。

・データソースとして使用するためGoogle Analyticsを連携しておく。

・結果の表の表示のためLooker Studioを連携しておく。

WordPressでウィジェットにユニークなCSSセレクタを設定する

Google Tag Managerのトリガーの条件とするため、ウィジェットにユニークなCSSセレクタを設定しましょう。

正確に測定するためには最低限、ページごとユニークな値にする必要があります。

ある程度の命名規則を決めておくことをお勧めします。

本サイトの場合はclassを使用し、以下のように設定しています。

(デバイス)-(表示ページ)-(表示場所)-(種別)(連番)

ウィジェットごとのclass設定はプラグインを使用するのが簡単です。

本サイトではWidget Optionsを使用しています。

プラグインを導入すると以下のようにウィジェットごとにclassやidを設定することができます。

Google Tag Managerで変数を設定する

設定したトリガーの条件を満たしたとき、設定したCSSセレクタ or IDをGoogle Analyticsに送るために変数を設定します。

まずは表示された要素までのセレクタをオブジェクトから単純文字列に変換する変数を作成します。

①「変数のタイプ > カスタム JavaScript」を選択。

②カスタム JavaScriptに以下を記載。

function() {
  var originalEl = {{Click Element}};
  var el = originalEl;
  if (el instanceof Node) {
    var elList = [];
    do {
      if (el instanceof Element) {
        var classString = el.classList ? [].slice.call(el.classList).join('.') : '';
        var elementName = (el.tagName ? el.tagName.toLowerCase() : '') + (classString ? '.' + classString : '') + (el.id ? '#' + el.id : '');
        if (elementName) elList.unshift(elementName);
      }
      el = el.parentNode
    } while (el != null);
    var objString = originalEl.toString().match(/\[object (\w+)\]/);
    var elementType = objString ? objString[1] : originalEl.toString();
    var cssString = elList.join(' > ');
    return cssString ? elementType + ': ' + cssString : elementType;
  }
}