102 人が現在オンライン
102 人が現在オンライン
Google アナリティクスの Google タグマネージャを含む計測の設定やトラブルシュートなどについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合ってより知識を高めていきましょう。
ガイドを表示
star_border
返信

チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭

いつもお世話になっております。

 

サイト内の検索ページにて、検索を行った際

チェックボックスが入った情報を取得したいと考えています。

 

下記のようなコードで各条件をチェックボックスで選択できるようにしてあります

 

<p style="display: block">
<span class="check_design" style="display: inline-block; _display: inline; border-top:none; padding-left:0px; margin-right:3px;">
<input type="checkbox" name="hogehoge" value="1" onclick="checkArea(this,'58,59')" id="area1">
</span>
<label for="conditionsA">項目A</label>
<span>
<span class="check_design" style="display: inline-block; _display: inline; border-top:none; padding-left:0px; margin-right:3px;">
<input type="checkbox" name="hogehoge" value="2" onclick="checkTdfk(this,'11', '')" id="area2">
</span>
<label for="conditionsB">項目B</label>
<span class="check_design" style="display: inline-block; _display: inline; border-top:none; padding-left:0px; margin-right:3px;">
<input type="checkbox" name="hogehoge" value="3" onclick="checkTdfk(this,'11', '')" id="area3">
</span>
<label for="conditionsC">項目C</label>
</span>
</p>

 

 

上記の中で、検索条件にチェックを入れてた内容を取る為

下記のような変数を用意しました。

チェックの入っているかを確認し、入っていたらidを返す、という風にしました。

 

 

function () {
    var conditions = [];
    $("[name=hogehoge]:checked").each(function() {
      conditions.push( $(this).val() );
      });
    return;
}

 

 

この変数を、GAのイベントでトラッキングしようと考え

イベントラベルに設定したのですが、取得ができません。

 

ご教示のほどよろしくお願いします。

いつも手さぐり
1 人のエキスパートが返信verified_user
1 件の受理された解決策

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

Re: チェックボックスでチェックが入っていたらinput idを返す

トップコントリビューター

今回のケースでは、クリックした要素と取得した要素が一致しないことなどから、カスタムJavaScriptで変数を作成する必要があるはずです。

 

その意味では、質問者のアプローチの仕方は正しいです。

 

いただいたコードを見ると、

 

function () {
    var conditions = [];
    $("[name=hogehoge]:checked").each(function() {
      conditions.push( $(this).val() );
      });
    return;
}

となっており、

return;

の部分が気になります。このカスタムJavaScript変数で定義している関数が何も値を返していないのが原因ではないか?と疑っています。

もし、実際のGTM画面でも同様に書いているのであれば、該当箇所を

return conditions.join(', ');

などと値を返すようにして見てはいかがでしょうか。

 

 

 

 

元の投稿で解決策を見る

Re: チェックボックスでチェックが入っていたらinput idを返す

[ 編集済み ]
レジェンド

Mii さん

 

認識が間違っていたらすみません。

 

GAのイベントトラッキングには、イベント送信用のコマンドを使わなければいけません。

※GTM利用ではない場合。

 

このようなコード

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

 

こちらは使用されておりますでしょうか?

 

onclick に上記コードを追加したりすることで、

GAにイベントデータを送信します。

 

参考:

イベント トラッキング  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

https://developers.google.com/analytics/devguides/collection/analyticsjs/events 

 

 

Tatsuma Ishibashi
※問題が解決できた際は、参考になった回答の「✓解決策マークを付ける」をクリックいただけると幸いです。

Re: チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭
Tatsumaさん

お世話になります。

記載漏れですが、GTMを使用しております。
①タイトルのような変数をカスタムjavascriptで作成
②トリガー:検索ページで特定のclass名を持つボタンをクリックしたら
③タグ:GA(UA)のイベントタグを作成。ラベルを①の変数に設定

上記のような設定を予定しております。

捕捉ですが、トリガーを「15秒経過したら」に変更し、
プレビューモードで取得情報を確認していたのですが
どうにも①のjsがうまく動いていないようで、値を取得できていませんでした。

また、社内のエンジニア(GTM/GAの知識はありませんが、jsのわかるwebエンジニアです)
に協力してもらい、ブラウザのデバッグ機能を使いながらjsを書いてもらった際には
値が取れていたようでした。

いつも手さぐり

Re: チェックボックスでチェックが入っていたらinput idを返す

セミ プロフェッショナル ✭ ✭ ✭

①タイトルのような変数をカスタムjavascriptで作成
②トリガー:検索ページで特定のclass名を持つボタンをクリックしたら
③タグ:GA(UA)のイベントタグを作成。ラベルを①の変数に設定

トリガーが違うからデータが入ってこないようですね。

 

実装されているJSの関数内で下記ページに記載されているようにdataLayer.pushを使えばいけそうですね。

https://developers.google.com/tag-manager/devguide#multipush

 

例えば

 

dataLayer.push({
  'value': $(this).val(),
  'event': 'checkbox'
});

のようなイメージです。

 

このときにトリガーは

カスタムイベント

イベント名 = checkbox

とすればよいかと。

 

_Hideki_

Re: チェックボックスでチェックが入っていたらinput idを返す

レジェンド
Mii さん

js にデータレイヤー変数、カスタムイベントを送信するように対応すれば、
ほぼほぼ取得できていなかった値を取得してイベントデータ計測できるでしょう。

しかし、js もGAもGTMもしっかり理解できていないといけないため
なかなかにハードルが高いですよね。大変です。

GTMを利用されておりましたら、js で値取得せずに
組み込み変数の「Click ID」で値取得を試してみてはいかがでしょう?

(チェックボックスに Click ID 変数が対応しているか試したことがないため、
チェックボックスで思うように Click ID 変数が機能しなかったらご容赦ください。)

参考:
ウェブサイト用コンテナの組み込み変数 - タグマネージャ ヘルプ :
https://support.google.com/tagmanager/answer/7182738?hl=ja

引用 _ _ _
Click ID: クリック トリガーの成立時に、dataLayer の「gtm.elementId」キーを取得します。値はクリックされた DOM 要素の id 属性の文字列になります。
_ _ _

●組み込み変数
GTMの
左メニューの「変数」
 ↓
上の方の 組み込み変数 の下の「設定ボタン」
 ↓
右に出てきたメニュー内のクリックのところにある「Click ID」にチェックしてメニューを閉じる

で使えるようになります。


①変数: Click ID で、クリックされた時の値を取得する変数を作成
②トリガー: 既作成のトリガー
③タグ:GA(UA)のイベントタグを作成。ラベルを①の変数に設定

上記のGTM設定でイベントデータを計測できませんか?

Tatsuma Ishibashi
※問題が解決できた際は、参考になった回答の「✓解決策マークを付ける」をクリックいただけると幸いです。
ベストアンサーのマーク済み.
解決策
トピック作成者Miiさんが付与
6月

Re: チェックボックスでチェックが入っていたらinput idを返す

トップコントリビューター

今回のケースでは、クリックした要素と取得した要素が一致しないことなどから、カスタムJavaScriptで変数を作成する必要があるはずです。

 

その意味では、質問者のアプローチの仕方は正しいです。

 

いただいたコードを見ると、

 

function () {
    var conditions = [];
    $("[name=hogehoge]:checked").each(function() {
      conditions.push( $(this).val() );
      });
    return;
}

となっており、

return;

の部分が気になります。このカスタムJavaScript変数で定義している関数が何も値を返していないのが原因ではないか?と疑っています。

もし、実際のGTM画面でも同様に書いているのであれば、該当箇所を

return conditions.join(', ');

などと値を返すようにして見てはいかがでしょうか。

 

 

 

 

Re: チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭
_Hideki_様

アドバイス・参考URLありがとうございます。
参考ページ内熟読いたしましたがまだかみ砕くことができず
まだテストできておりません。
一旦別アプローチで近しい値が取れたため、これで問題があった場合
_Hideki_様にいただいたアドバイスのもと、対応してみようかと思います。

ありがとうございました。
いつも手さぐり

Re: チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭
Tatsuma様

たびたびのご助言ありがとうございます。
頂いた内容で以下のように設定してみました。

①変数:データレイヤー変数{{Click ID}} 変数名「ClickIDの取得」
②トリガー:作成済のトリガー + 15秒経過で発火するトリガー(プレビューモードで確認するため)
③タグ:GA(UA)のイベントタグを作成。ラベルを①の変数に設定

結果ですが、うまく値を取得できませんでした。
内容は、プレビューモード内で確認したところ
gtm.timerで直前のClickIDの取得はできている様子があるものの
実際に本番公開 ⇒ 本番環境テスト
とすると、(not set)となってしまい、計測ができませんでした。

せっかくアドバイスいただいたのに、結果が残せず申し訳ありません。
ありがとうございます。
いつも手さぐり

Re: チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭

山田様

 

ご教示いただいた

return conditions.join(', ');

に書き換えを行ったところ、idではなくvalueの値が返ってくるようになりました。

しかし、大きな一歩です。ありがとうございます。

こちら、親記事の通り、idを取得するよう変更はできるのでしょうか。

難しければ運用でカバーの方向で調整いたします。

 

たびたびの質問で恐縮ではございますが、ご確認のほどよろしくお願いいたします。

いつも手さぐり

Re: チェックボックスでチェックが入っていたらinput idを返す

トップコントリビューター

であれば、

 

conditions.push( $(this).val() );

としているところを、

 

conditions.push( $(this).attr('id') );

とすれば良いかと思います。

Re: チェックボックスでチェックが入っていたらinput idを返す

Mii
上級者 ✭ ✭
山田様

早速のご返信ありがとうございます。
無事、idの取得ができました。

ありがとうございます。
いつも手さぐり