質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6274閲覧

ページ内の任意のdiv内でクリックがされたときにそのdiv内のh3タグ内の文字列をGoogleタグマネージャーのカスタムjavascriptで取得したい

leo_xxx

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2016/05/24 07:39

編集2016/05/24 08:19

###前提・実現したいこと
複数の同じようなdiv構造を持つページ内で、div内でクリックが発生したときに、そのdiv内に含まれるh3タグ内の文字列を取得したい。
取得する方法はGoogleタグマネージャーのカスタムjavascriptを使う前提です。
いろいろスクリプトを試してみましたが、所望のような動作になりません。
当方はhtmlはだいたい理解できるものの、javascriptに関しては、これを実現するために勉強を始めたばっかりのレベルです。

###該当のソースコード

ページ内は以下のようなdivが連続して存在しています。

HTML

1<div class="Wrapper"> 2<div id="id0" class="tempoResult"> 3<h3><span><img src="icon_01.png" alt="江戸川店"></span>江戸川店</h3> 4<p>東京都<br>江戸川区<br>葛西<br>1-1-1</p> 5<p>Tel:03-3456-7890</p> 6<p>営業時間<br>10時-23時</p> 7</div> 8</div> 9 10<div class="Wrapper"> 11<div id="id1" class="tempoResult"> 12<h3><span><img src="icon_02.png" alt="西葛西店"></span>西葛西店</h3> 13<p>東京都<br>江戸川区<br>西葛西<br>1-1-1</p> 14<p>Tel:03-3456-9999</p> 15<p>営業時間<br>24時間営業</p> 16</div> 17</div> 18

1つめのdivで取得したいのは『江戸川店』の部分、
2つめのdivで取得したいのは『西葛西店』の部分です。

上記の形のdivでない部分をクリックされた場合は、nullで返れば問題ありません。

###試したこと
Googleタグマネージャーのカスタムjavascriptに以下のスクリプトをセットして、クリックされた周辺の文字列を取得することはできています。
この場所を元に最終的にh3タグ内の文字列を取得したいと思っています。

Javascript

1function () { 2 return {{Click Element}}.innerHTML 3} 4

###補足情報(言語/FW/ツール等のバージョンなど)

javascriptが実行できれば特に環境依存するようなことはないと思います。
htmlのコーディングを変更せずに、Googleタグマネージャーのスクリプトのみで文字列を取得できるようにすることが要件です。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/24 08:10

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
leo_xxx

2016/05/24 08:28

修正しました。不慣れで申し訳ありません。
guest

回答2

0

hide2e3rさんとのやり取りを見る限り、{{Click Element}}はクリックした直下の要素を取得するみたいですね。
var ele = {{Click Element}};として中にDOMが入っているかわかりませんが、ここから親要素を手繰れれば求めている要素に辿り着けるかもしれません。

ただ、それより <div class="Wrapper"><a class="Wrapper" href="javascript:void(0)"> に切り替えてクリックイベントで要素をとるほうが早い気がします。(なんとなくクリックのほうが優先されそうなので)

【Googleタグマネージャーでクリックされたリンクを特定する方法 | EVERRISE アドテクブログ】
http://www.ever-rise.co.jp/adtech-blog/tagmanager-3.html


また、dataLayer という変数を作っておけばそれも利用できるようです。これはGTM上ではなくサイト上でクリックイベントを拾い、GTMに送る方法です。

【リンクのクリックをGAで計測するのも簡単! タグマネージャの「イベントリスナー」の使い方(全20回の15) | 実践 Googleタグマネージャ入門 | Web担当者Forum】
http://web-tan.forum.impressrd.jp/e/2015/03/02/18978

【Google Tag Manager(GTM)を利用してAjaxのページャーからのページ遷移を仮想ページビューとして計測する】
http://marketing-sphere.blogspot.jp/2013/04/google-tag-managergtmajax.html

【Googleタグマネージャに自在にデータを渡す「データレイヤー変数」(全20回の19) | 実践 Googleタグマネージャ入門 | Web担当者Forum】
http://web-tan.forum.impressrd.jp/e/2015/03/18/18983

【Google タグマネージャを使ってGoogle アナリティクスのカスタム ディメンションをセットする方法│株式会社イー・エージェンシー】
http://www.e-agency.co.jp/column/googletagmanagercustumdimention.html


どちらも試していない上に決め手といえるものではないですが、参考になれば幸いです。

投稿2016/05/24 10:48

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

leo_xxx

2016/05/24 11:24

回答ありがとうございます。 HTMLコーディング側を変更することも手段としては考えているのですが、今のところ、 htmlのコーディングを変更せずに、Googleタグマネージャーのスクリプトのみで文字列を取得できるようにすることが要件なのです。 おしえていただいたページは一通り見てみますね。
guest

0

ベストアンサー

h3の中身を取得すると画像部分を削除しなければいけないので、h3 imgのaltを取得する方向でどうでしょうか

javascript

1{{Click Element}}.getElementsByTagName('h3')[0].getElementsByTagName('img')[0].getAttribute('alt')

投稿2016/05/24 08:14

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

leo_xxx

2016/05/24 08:35

回答ありがとうございます。 確かにH3全体から不要な部分を除去するよりはimgタグ内のALTを取った方が早そうですね。 いただいたままセットして取得してみましたが、結果は、 Return Type undefined value undefined となりました。
退会済みユーザー

退会済みユーザー

2016/05/24 09:51

{{Click Element}}.innerHTML {{Click Element}}.getElementsByTagName('h3')[0].innerHTML の時に取得出来た内容をそれぞれ教えていただけますか
leo_xxx

2016/05/24 10:04

{{Click Element}}.innerHTML 上記の場合、 画像をクリック→ Return Type = String , value = '' h3の文字列をクリック→ Return Type = String , value ='(画像)江戸川店' 東京都 をクリック→ Return Type = String , value = ’東京都<br>江戸川区<br>葛西<br>1-1-1’ {{Click Element}}.getElementsByTagName('h3')[0].innerHTML こちらは、 どこをクリックしても Return Type = undefined , value = undefined となります。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2016/05/24 10:20

{{Click Element}}.innerHTMLがクリックした場所の要素が対象になるようなので、絞り込む以前に<div class="Wrapper">を対象にさせる方法が必要そうですね・・・
leo_xxx

2016/05/24 10:45

回答ありがとうございます。 はい、クリックされた階層から一番外側のWrapperを含むdivまるごとを取得したあとに階層下にあるh3内のimgタグのaltを取得するという段取りがよいと思います。 処理の順番的にはわかるのですが、どうコーディングしていいのやらというのが現状です。
退会済みユーザー

退会済みユーザー

2016/05/24 11:10

先にkei344さんの方法を試された上で・・・どうしようもない場合の力技として Wrapper内の子要素全てにdata-name="江戸川店"を設定して {{Click Element}}.getAttribute('data-name'); とかですかね・・・正直かなり汚い力技なので正攻法を探った上でどうにもならない時の暫定的な対処くらいに考えていただければと・・・
leo_xxx

2016/05/24 11:23

回答ありがとうございます。 HTMLコーディング側を変更することも手段としては考えているのですが、今のところ、 htmlのコーディングを変更せずに、Googleタグマネージャーのスクリプトのみで文字列を取得できるようにすることが要件なのです。
退会済みユーザー

退会済みユーザー

2016/05/24 11:43

htmlを変更しないという話しなので、親要素を遡る方法を考えてみました。 前提条件として{{Click Element}}.getAttribute('alt')で画像部分をクリックした時にaltの中身が返ってくる必要があります。 帰って来ない場合はkei344さんも懸念されていますが{{Click Element}}がDOMではないため親要素、子要素を取得することができません。 その上で下記でどうでしょうか var flg = false; var tmpNode = {{Click Element}}; for(i=0; i<5; i++){ if(tmpNode.className == 'Wrapper'){ flg = true; break; } tmpNode = tmpNode.parentNode; } if(flg){ result = tmpNode.getElementsByTagName('h3')[0].getElementsByTagName('img')[0].getAttribute('alt'); return result; } else { return ''; } こんな感じで親要素を遡って(4階層まで)'Wrapper'クラスを持っていたらそこを基準にaltを取得しています。 Wrapperの他に`Wrapper box`のように指定されている場合はヒットしませんのでそういう箇所がある場合はif(tmpNode.className == 'Wrapper')の判定の部分を変更する必要があります。
leo_xxx

2016/05/25 00:29

回答ありがとうございました。 同様の.parentNodeで親をたどり、条件を確定して、そこから下がっていき、要素を取得する方法で解決しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問