ハウテレビジョン開発者ブログスマートフォン用の表示で見るハウテレビジョン開発者ブログ『外資就活ドットコム』を日夜開発している技術陣がプログラミングネタ・業務改善ネタ・よしなしごとについて記していきます。先日9/22にコーポレートサイトをリニューアルしたのでよろしければご覧ください。前回の記事ではGoogleTagManagerの概要を書きました。その記事でエンジニアでなくても好きなボタンやリンクにクリックイベントを設置できるのが素晴らしいという話をしました。今回はそのやり方について具体的に書いていきます。導入GTMの導入がまだの場合は導入を済ませてください。タグの設置方法については世の中に多くの解説記事があるので、それらを参考にしましょう。スマートフォン&モバイルEC事例ノウハウ集|モバイルファーストラボ今回の課題それではイベントの設置を始めます。今回は以下のような要望を例にとってみます。Ajaxで送信しているフォームの「送信する」ボタンのクリック数が知りたい。「送信する」ボタンを押してもページ遷移しないので、遷移先のPV数をクリック数として扱うこともできません。コードを追記することでイベントを設置していました。GTMがあれば管理画面からイベントを設置することができます。ページトラッキングタグの設置PVを取得するためのタグです。GTMでAnalyticsを設置した方はすでに設定済みかもしれません。クリックリスナーの設置つぎに、クリックイベントを拾うためのタグを設置します。「新規作成」から「タグ」を選択してください。タグの新規追加画面で以下のように設定します。ルールには「既存のルールから選択」の「すべてのページ」を選択します。「保存」すると以下のようにタグが追加されているはずです。「どのボタンのクリックをカウントするのか」を決定する「ルール」を作ります。その前に、クリックのカウントをしたい対象のボタンのidを取得しましょう。いうidが振られている前提で話を進めます。id="contact_send">送信する</button>もしボタンにidが振られていなかったら、2つの選択肢があります。エンジニアに頼んでボタンにidを付けてもらうid以外でボタンを識別する方法を考える2の方は話が複雑になるので、今回は1の方法が可能である前提で進みます。ボタンのidが判明したらまず、「新規作成」から「ルール」を選択します。ルール名に任意の名前をつけ、2つの条件を追加します。「gtm.click」と入力したもの。id」「等しい」と選択し、入力欄にボタンのidを入力したものです。「保存」すると、ルールのタブは以下のようになっているはずです。イベントタグの設置さて、最後にイベントタグを設置します。「新規追加」から「タグ」を選択してください。新規追加ページで以下のように選択します。このタグのルールは2で新しく作ったルール"のみ"を選択するようにしてください。「保存」すると、タグの構成は以下のようになります。公開!!ここまでで、設定は完了です。公開してクリックイベントが計測できていることを確認しましょう。GTMの便利な機能として、「デバッグ」があります。デバッグボタンを押した状態でサイトを見に行くと、どんなタグが発行されているかひと目でわかるので、一度試してみてください。おわりにやや手順は面倒ですが、慣れれば縦横無尽にイベントを設定できるようになります。エンジニアは面倒なイベントの設定から開放され、マーケターは機動的な計測が可能になります。GTMの導入を検討してみてください。突...2015-12-18サーバの監視システムを設計したときに考えたこと弊社では少し前にサーバをAWSに移行しました。WebDriverで、新規会員登録フローのE2Eブラウザテストを自動化してみた。エンジニアの@bumcruです。Chromeマリオカート8でレートが7000を超えた津田です。はてなブログPro『外資就活ドットコム』の開発チームです。技術ネタ・プログラミングネタ等々書いていきます。業務未経験からエンジニアになって半年を振り返るDocker初心者がRails+MySQLの環境構築をDockerでやってみた月別アーカイブ検索はてなブログをはじめよう!howtvさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。