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

やりたいこと

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

やりかた

以下のサービスを連携させて計測します。あらかじめ連携を済ませておいてください。

  • Google Analytics
  • Google Tag Manager
  • Google Looker Studio

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

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

正確に測定するためには最低限、ページごとユニークな値(ページの中で一か所になるよう)にする必要があります。
ある程度の命名規則を決めておくことをお勧めします。

本サイトの場合はclassを使用し、以下のように設定しています。
(デバイス)-(表示ページ)-(表示場所)-(種別)(連番)

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

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

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

Google Tag Managerで要素ごとにトリガーを設定する

以下のようなトリガーを作成します。
ウィジェットごとに1つトリガーを設定しましょう。

  • STEP 1

    「トリガーのタイプ」>「要素の表示」を選択します。

  • STEP 2

    「選択方法」>「CSSセレクタ」を選択します。
    ※classではなくidの場合は「ID」で設定しましょう。

    「要素セレクタ」エリアにウィジェットユニークなCSSセレクタを記載します。

  • STEP 3

    「このトリガーを起動するタイミング」>「1ページにつき一度」を選択します。
    ※上記を基本に計測したい頻度で設定してください。

  • STEP 4

    「視認の最小割合」を記載します。
    ※要素が何%表示された段階で表示されたとみなすのかの値です。デフォルトの50で問題ありません。

Google Tag Managerで変数を設定する

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

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

  • STEP 1

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