104 人が現在オンライン
104 人が現在オンライン
Google アナリティクスのアカウント設定、プロパティ、ビューやフィルタ設定などについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合って、よりデータ分析の知識を高めていきましょう。
ガイドを表示
star_border
返信

audio要素のクリック計測について

初級者 ✭ ✭ ✭

お世話になっております。

(GTM初心者ですので、質問内容に不備がありましたら、申し訳ございません。)

 

 

html5のaudio要素の、再生ボタンクリック計測の質問です。

 

下記ソースのように設置されている音声ファイルの、再生ボタンクリック計測をしたいのですが、

GTMプレビューモードで再生ボタンをクリックしても、Summaryに表示されません。

(音声ファイルのタイトル部分(audio要素以外)などをクリックすれば、「gtm.click」が表示されますので、トリガーには不備がない、という認識です。)

-ソース----

<audio preload="auto" controls="controls">
<source src="XXX/XXX/XXX.mp3" />
<p>Audio Attention</p>
</audio>

-------------

調べてみたところ、video要素では、onplay属性を入れることで計測可能となるようですが、

audio要素も同様にonplay属性を入れることで、Summaryに表示されるようになりますでしょうか?

また、onplay属性を入れる以外に、Summaryに表示させる方法はありますでしょうか?

 

 

私の知識が足りない点が多々あるかと思いますが、ご教示いただけますと幸いです。

どうぞよろしくお願い致します。

 

1 件の受理された解決策

受理された解決策
ベストアンサーのマーク済み.
解決策
トピック作成者karin mさんが付与
11月 2016

Re: audio要素のクリック計測について

レジェンド

実際のテストサイトで試して見ました。結論、手順1のカスタムHTMLタグを、

 

$(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
    });
  });
});

に変更すると、うまく動きそうです(イベント名などの細部は変えていただいて構いません)。どうやら、delegateでplayイベントが渡って来ないようなので、delegateを使わないようにしています。

 

こちらで試して見てください。

 

 

 

元の投稿で解決策を見る

Re: audio要素のクリック計測について

レジェンド
audio要素にも、video要素と同様に、onplay属性は利用可能です。
ただし、Googleタグマネージャから設定しようと思っても、デフォルトのトリガーで設定することは難しいです。

まずは、どのような設定を行ったかを記載してもらってもいいですか?

Re: audio要素のクリック計測について

初級者 ✭ ✭ ✭
ご返信ありがとうございます。

>audio要素にも、video要素と同様に、onplay属性は利用可能です。
 →理解力がなく、恐縮ですが、onplay属性を利用することで、
  再生ボタンクリックすると、GTMプレビューのSummaryに表示されるようになる、ということでよろしかったでしょうか?

>まずは、どのような設定を行ったかを記載してもらってもいいですか?
 →GTMには以下のような設定を行っております。
-----
・タグ
カスタムHTML
$(function() {
$(document).on('click','.audio-3-in-a-row', function(e) {
var AudioText = $(this).find("source").attr("src");
dataLayer.push({
"event" : "Event",
"eventCategory" : "Audio Click",
"eventAction" : AudioText,
"eventLabel" : null,
"eventValue" : null
});
});
});
詳細設定は、デフォルト値です。

・トリガー
「url hostname」を設定しています。(url hostnameがwww.XXX.comに等しい、というような設定です。)
-----
情報が不足しておりましたら、ご指摘願います。
どうぞよろしくお願い致します。

Re: audio要素のクリック計測について

レジェンド

下記の手順で試してみてください。


手順1. カスタムHTMLタグの配信
記載いただいたカスタムHTMLタグを下記に変更し、サイト内の全てのページのページビューで配信してください。

 

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

 

手順2. トリガーの作成
カスタムイベントのトリガーを作成し、イベント名を「Audio Click Event」としてください。
(トリガー名は何でも良いですが、イベント名と合わせるのがよいと思います)


手順3. データレイヤー変数の作成
既に作成済みかと思いますが、ユーザー定義変数で変数タイプ「データレイヤーの変数」の変数を
作成します。作成するのは、「eventCategory」「eventAction」「eventLabel」「eventValue」です。


手順4. イベントトラッキングタグを追加
GAのイベントタグをGTMから追加します。
イベントのカテゴリ、アクション、ラベル、値は作成したデータレイヤー変数を使ってください。
また、紐づけるトリガーは、手順2で作成したカスタムイベントのトリガーです。

 

Re: audio要素のクリック計測について

初級者 ✭ ✭ ✭
ご教示いただきまして、ありがとうございます。

ご教示いただいた、手順1のカスタムHTMLに修正しました。
(手順2~4は既に、「trackEvent」というトリガーがありますので、代用いたしました。
 それに伴い、手順1の"event"も"trackEvent"としております。)

しかし、GAの[レポート]-[リアルタイム]-[イベント]には計測されてきませんでした。
(手順2~4を省かないケースも試しましたが、計測されませんでした。)

その他解決策をご存知でしたら、ご教示いただけますと幸いです。
必要な情報がありましたら、都度可能な範囲でご報告させて頂きます。

よろしくお願い致します。

Re: audio要素のクリック計測について

レジェンド
こんにちは。横からすみません。

これたぶん、ブラウザによって異なるんじゃないですかね。


------
文責:カグア!

Re: audio要素のクリック計測について

初級者 ✭ ✭ ✭
カグア様

ご教示くださいまして、ありがとうございます。
ご指摘いただいたとおり、今までChromeで実施しておりましたが、
firefoxですと、GTMプレビューでのSummaryに再生クリックが表示されるようになりました。

追加質問になってしまうのですが、
サイト閲覧者が、Chromeを使っている場合、計測されない、ということになるのでしょうか?

#まだGAに正しく計測はされていませんが、カスタムHTMLをいじりたいと思います。

よろしくお願い致します。

Re: audio要素のクリック計測について

レジェンド
やはりそうでしたか・・・。

なんか動画って、フォーマットもそうですが、ほんと昔から統一されないですよね、ちょっとした挙動を含めて。
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats

たぶん、jQueryプラグインとか、いろいろそのあたりを吸収してくれそうなプラグインはありそうですけど
そうなりますと、それ頼みなってなんか悩ましいですよね。

山田さんが公開しているYouTubeの再生ボタン計測なども含め、どのあたりが落とし所になるのか次第
なんですかね。どちらかというと。たぶん、なんか動画ってもうYouTubeがシェア大きすぎて、なかなか
共通ライブラリとかもなさそうなイメージですけど、どうなんですかね。

情報ある方、他のかたもぜひご存知であれば知りたいですね。

------
文責:カグア!
ベストアンサーのマーク済み.
解決策
トピック作成者karin mさんが付与
11月 2016

Re: audio要素のクリック計測について

レジェンド

実際のテストサイトで試して見ました。結論、手順1のカスタムHTMLタグを、

 

$(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
    });
  });
});

に変更すると、うまく動きそうです(イベント名などの細部は変えていただいて構いません)。どうやら、delegateでplayイベントが渡って来ないようなので、delegateを使わないようにしています。

 

こちらで試して見てください。

 

 

 

Re: audio要素のクリック計測について

初級者 ✭ ✭ ✭
山田良太様

ありがとうございます。ご教示いただいた内容で、
firefox・Chromeともに計測されるようになりました!

「delegate」は初耳でしたので、ご教示いただいたカスタムHTMLと一緒に、理解を深めたいと思います。

早急に解決できまして、非常に助かりました。
ありがとうございました。

Re: audio要素のクリック計測について

初級者 ✭ ✭ ✭
カグア様

ご返信ありがとうございます。
ブラウザによる違いあることは、今回初めて知りましたが、統一されていないのは、なかなか不便ですね・・・。

山田様からご教示いただいた内容で、本件は解決いたしましたが、
プラグインについても、まだ知識不足な段階ですので、もう少し勉強させて頂きます。

ご教示いただき、ありがとうございました。