Google Tag Manager を使って Audio タグで再生したクリック数を調べる

• 概要
• 環境
• 事前準備
• カスタム HTML タグの作成
• 変数の作成
• トリガーの作成
• トラッキングするタグを追加
• 公開する
• 応用 audio.js に対応してみる
• 最後に
• 参考サイト

概要

Audio タグは HTML5 で実装されたタグで mp3 などのオーディオファイルをブラウザ上で再生することができるタグです
そのタグの再生ボタンがどれくらい押されたかという情報は取りたくなると思います
今回は Google Tag Mangaer を使ってその Audio タグのクリック情報を取得する方法を紹介します

環境

• macOS 10.13.4
• Google Tag Manager 2018/04/23 時点
• Google Analytics 2018/04/23 時点

事前準備

Google Analytics でプロパティを作成しておいてください
UA からはじまるトラッキング ID が取得できていれば OK です
また Google Tag Manager のアカウント作成とアカウントに紐づくコンテナ作成を行っておいてください

カスタム HTML タグの作成

スクリプトの部分は以下の通りです

<script>
$(function() {
  $('audio').on('play', function(e) {
    var AudioText = $(this).find("source").attr("src");
    dataLayer.push({
      "event" : "Audio Click Event",
      "eventCategory" : "Audio Click",
      "eventAction" : AudioText,
      "eventLabel" : null,
      "eventValue" : null
    });
  });
});
</script>

audio タグの再生ボタンが押された時にイベント情報を送信します
今回はすべてのページで監視する設定ですが特定のページだけの場合はトリガーを変更してください

変数の作成

左メニューから変数を選択し新規作成します
先ほどのスクリプト内で使った変数を定義します

変数は「データレイヤー変数」を選択してください

トリガーの作成

左メニューからトリガーを選択し新規作成します

トリガーの種類は「カスタムイベント」を選択しましょう
名前はスクリプト内で定義した「Audio Click Event」にしました

トラッキングするタグを追加

あとは作成したトリガーと変数を使って Google Analytics のタグを新規で作成するだけです

カテゴリ、アクション、ラベル、値は作成した変数を選択します
直接入力しないでもテキストボックスの横にボタンがあるはずなのでそこから変数を選択できます
トリガーも先ほど作成したカスタムイベントのトリガーを選択しましょう

公開する

サマリー画面から「公開」すれば OK です
バージョンや説明は適当に設定してください
プレビュー機能を使って設定したタグが 2 つあることを確認してください
※自分はもう一つ Google Analytics のタグを追加しているので 3 つありますが今回とは関係ないので 2 つあれば OK です

また Google Analytics 側でリアルタイム集計を確認するとちゃんと再生したイベントが送信されていることも確認できます

応用 audio.js に対応してみる

audio.js の場合 source タグを使いません
また、自動的に audio タグが div タグで囲われてしまうため audio タグを直接クリックすることができません
なので、カスタム HTML を以下のように修正します

<script>
$(function() {
  $(document).on("click", 'div[class="play-pause"]', function(e) {
    var AudioText = $("audio").attr("src");
    dataLayer.push({
      "event" : "Audio Click Event",
      "eventCategory" : "Audio Click",
      "eventAction" : AudioText,
      "eventLabel" : null,
      "eventValue" : null
    });
  });
});
</script>

これで audio.js にも対応することできるようになります

最後に

Google Tag Manager を使って audio タグのクリック数を集計する方法を紹介しました
これを応用すれば audio タグの他のイベント情報も集計することができると思います

ただ、前提として Google Tag Manager のサービス概念を理解していないと厳しいかもしれません
Google Analytics よりも一つ上位のレイヤーのサービスになるので実際は Google Analytics 側にデータを溜め込んでいます

Google Analytics の機能を Google Tag Manager を使うことで一括して管理、公開することができるようになります
要するに Google Analytics の機能を使う場合も Google Analytics の画面からではなく Google Tag Manager からやりましょうということになります

参考サイト

• https://www.ja.advertisercommunity.com/t5/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E8%A8%AD%E5%AE%9A/audio%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E8%A8%88%E6%B8%AC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/td-p/19086#