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

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

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

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

6839閲覧

ポップアップのイベントトラッキング

watermusic

総合スコア15

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/04/23 12:59

レスポンシブにてページを制作中です。
ページ内に複数の商品を配置していて、商品写真をクリックすると
colorboxのポップアップ(inlineHTML)で、各商品の詳細を表示させています。

ここで、各商品をポップアップに
Google Analyticsでイベントトラッキングを設定しています。

lang

1<a onClick="ga('send','event','商品','popup','商品名');" class='inline' href="#pop1"> 2<img src="img/pop1.jpg" width="300" alt="商品名" /> 3</a>

各ポップアップ内にはSNSのシェアボタンや外部リンクも設置していて同じようにga設定しています。

Analyticsのリアルタイムイベントでクリックを確認した所、SNSのシェアボタンや外部リンクはきちんと漏れなく計測できるのですが、ポップアップクリックのみ、反映される場合と反映されない場合がありました。(されない方が圧倒的に多い)

色々調べた所、GAへデータ送信する前にポップアップが表示されてしまい、クリックデータが取得されない=カウントされないという事かな?と推測していますが、解決策が思いつきません。。

きちんとポップアップのクリック数を計測できるような
回避方法をご指導頂けないでしょうか?


ちなみに下記記述でPCではきちんとポップアップのクリック数、反映できました。

lang

1<a onMouseDown="ga('send','event','商品','popup','商品名');" class='inline' href="#pop1">

スマホでは下記の記述で大丈夫でした。

lang

1<a onTouchStart="ga('send','event','商品','popup','商品名');" class='inline' href="#pop1">

レスポンシブなので、出来るだけ1個のソースで設定できたらな、と思っていますが行き詰まっております。


ご指導のほど、どうぞ宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

Colorbox の onOpen で送ってはいかがでしょう。

【Colorbox - a jQuery lightbox】
http://www.jacklmoore.com/colorbox/

投稿2016/04/23 13:56

kei344

総合スコア69364

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

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

watermusic

2016/04/23 15:09

アドバイスありがとうございます! 早速、`onOpen` を調べてみましたが ポップアップ数が多いので、やはりすでに設定完了している`inlineHTML`を呼び出したく、下記のような感じで `onOpen` には何も設定せずに書いてみたのですが、やはりクリックは取得できませんでした。。 ```lang-javascript $(".inline").colorbox({ inline:true, onOpen:function(){} }); ``` 初心者すぎて、恥ずかしいです。すみません。 `inline:true` で、onOpenで送る方法はあるのでしょうか?? もしあれば、もう少し詳しくアドバイス頂けると幸いです。 どうぞ宜しくお願い致します。
kei344

2016/04/23 15:28

> `onOpen` には何も設定せずに書いてみたのですが、やはりクリックは取得できませんでした。 当然そうなります。onOpenにはオープン時に実行する関数を書き、その中でどこから押されたかを確認し、gaに送るという処理をするつもりで回答を書きました。 その場合 inlineHTML で有っても無くても問題ありません。 JavaScriptをかける方に仕事として依頼されるのがよいと思います。
watermusic

2016/04/24 03:36

返信ありがとうございました。 > onOpenにはオープン時に実行する関数を書き、その中でどこから押されたかを確認し、gaに送るという処理をするつもりで回答を書きました。 そうですよね。おっしゃるとおりです。 JavaScriptをかける方にツテがないので、回答頂いた処理のできる関数を調べてみます。 ありがとうございました!
guest

0

kei344さんのonOpen で送っては?というアドバイスのもと
色々と調べまくり、自己流ですが下記のコードで無事解決致しました!

lang

1$(function() { 2 $(".inline").colorbox({ 3 inline:true, 4 onOpen:function() { 5 var popurl = $(this).attr('href'); 6 var popname = $(this).attr('title'); 7 ga('send','pageview', {'page':popurl,'title':popname}); 8 }}); 9});

本当はイベント ga('send','event'〜 で取得したかったのですが
どうしても出来なく、previewでは成功しました。

PC、スマホ、タブレットでほぼ完璧に(漏れなく)取得できました。
kei344さん、ありがとうございました。

投稿2016/04/24 05:33

watermusic

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問