Analytics」でのイベントトラッキング方法こんにちは、連クミコです。WordPressでのサイト構築の際、プラグインは手軽に高度な機能を追加できるとても便利なツールです。プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合、GoogleアナリティクスやGoogleタグマネージャだけでなく、プラグイン自体の仕様も理解しておく必要があるため、とても難解な作業となります。7」のトラッキングから試してみました。フックを使用する方法は現在では非推奨になっています。この機能は2017年中に廃止される予定です。公式サイトでこのような注意書きが書かれていたので、本記事では、公式の推奨するカスタムDOMイベントを使ったイベントトラッキング方法を試みています。WordPressの必要バージョンが「4.6以上」とのことなので、古いWordpressのバージョンのまま運用されている場合は、アップデートが必要になります。Codex日本語版」に記載のアクションフックの記述方法を参考にさせて頂きました。日本語版wpdocs.osdn.jpスポンサーリンクGoogleアナリティクス(analytics.js)でのイベントトラッキング方法まず紹介するのはGoogleアナリティクス(analytics.js)のトラッキングコードをサイトに直書きしている場合の計測方法です。「テーマのための関数(functions.php)」を選択します。「テーマのための関数(functions.php)」に次のようにソースコードを追記します。}5行目の「14」は、計測したいフォームのIDを入力します。該当フォームのIDをご確認ください。追記ができたら「ファイルを更新」ボタンを押してください。※この方法はユニバーサルアナリティクスのトラッキングコードを実装しているサイト向けの方法です。新トラッキングコード(gtag.js)では動作しませんでしたので、ご注意ください。2017年12月16日追記:グローバルサイトタグ(gtag.js)は次の方法でイベントトラッキングすることができました。次に紹介するのはグローバルサイトタグ(gtag.js)のトラッキングコードをサイトに直書きしている場合の計測方法です。「テーマのための関数(functions.php)」を選択します。これはユニバーサルアナリティクス(analytics.js)と同じです。「テーマのための関数(functions.php)」に次のようにソースコードを追記します。ユニバーサルアナリティクス(analytics.js)とことなるのは、ソースコードのga(hoge)が、gtag(hoge)に変わる部分です。}5行目の「14」は、計測したいフォームのIDを入力します。該当フォームのIDをご確認ください。追記ができたら「ファイルを更新」ボタンを押して、完了です。次に紹介するのはGoogleタグマネージャを使った計測方法です。「テーマのための関数(functions.php)」を選択し、次のようにソースコードを追記します。//「output」定義された内容を出力します}5行目の「14」は、計測したいフォームのIDを入力します。該当フォームのIDをご確認ください。追記ができたら「ファイルを更新」ボタンを押してください。ページビュータグの設定Googleタグマネージャを使ってGoogleアナリティクスでアクセス解析するには、必ずページビュータグを設定する必要があります。設定の仕方は以下のページを参考にしてみてください。Googleタグマネージャ完全ガイド【導入メリットから使い方まで丁寧に】|アクセス解析ツール「AIアナリスト」ブログGoogleタグマネージャの概要、導入メリットから実際に導入する方法まで、初心者にも分かるように丁寧に解説しています。先程「テーマのための関数(functions.php)」ファイルに追記したソースコード内の変数名を定義します。開いて、「event」「contactform7_type」について、それぞれ下記のように設定してください。名前event変数の種類カスタムイベント名前dl_contactform7_type変数の種類データレイヤーの変数データレイヤーの変数名contactform7_type設定できたら、それぞれ保存ボタンを押して保存してください。進み、新規ボタンをクリックして、下記のように新規タグを作成してください。7」で問い合わせ内容が送信され、1で追加したソースコードがDOM(サイトのhtmlソース)内に表示された場合に発火させるタグになります。上の設定が出来たら、同じ画面でトリガーを設定しましょう。全てのカスタムイベントこの設定までできたら「保存ボタン」をクリックしたあと、設定内容を公開してください。これで全ての設定が完了です。下のように表示されます。7」以外にも、プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合には、上記のようなアクションフックやカスタムDOMイベントを使うことにより実現ができそうです。何分非エンジニアなもので、公式の解説を見ても、どこに何をかけばいいのか最初はサッパリ分かりませんでしたが、今回の試みをきっかけにJavaScriptの基礎を学習したことで、今までふんわりとしか分かっていなかったコードの指示内容を理解することができました。逆に言うと、今回紹介した方法を含め、プラグインを利用して実装したボタンやフォームのイベントトラッキングは非常にセンシティブで、ググって出てきた記事の方法をそのままコピペすると、最悪の場合、サイトが表示されない事態を招くこともあります(私もこの記事の内容を試している際ミスを起こして、一瞬サイトが非公開になりました...)ので、お試しになる方はご自身のサイトに実装した場合他のプログラムに影響が出ないか合わせて確認されることをオススメします。「我こそはJavaScriptマスター也!」とおっしゃる方、上記のコードなんですがもう少しシンプルにかけそうな気がしていますが、私のスキルではこれが限界でした。Analytics」がリリースされていました。導入は至って簡単です。Analytics」と検索すると、プラグインが表示されますので、「今すぐインストール」ボタンをクリックした後、インストール終了後「有効化」をクリックすれば完了です。イベントカテゴリ・イベントアクションは固定値、イベントラベルにはフォームタイトル名が表示されます。このプラグイン、例えば必須項目を入力しないで送信ボタンが押された場合など、エラーが表示された場合にもイベントが計測されてしまうという問題点があります。導入される方は、この懸念をふまえて、手軽さをとるか正確さを取るかを検討していただくと良いのではないかと思います。@shuhu_marketing関連記事Googleアナリティクスのクロスドメイン設定と陥りがちなミスこんにちは、連(むらじ)クミコです。最近「Googleアナリティクスでクロスドメイン設定をしたいんだけど、うまく計測ができない」というご相談を何件か頂いたので、正しいクロスドメイン設定の方法と、陥りがちなミスについてご紹介します。続きを読むクロスドメイン設定しつつクライアントIDを取得する際の落とし穴こんにちは、連(むらじ)クミコです。クライアントIDを取得されているサイトの運営者の方から「Googleアナリティクスでクロスドメイン設定をしたいんだけど、うまく計測ができない」というご相談を頂きまして、分かってしまえば簡単なことなのですが注意が必要だと感じたので、問題点と解決方法をご紹介します。続きを読むグローバルサイトタグ(gtag.js)の通常のeコマース設定方法Googleアナリティクスのグローバルサイトタグ(gtag.js)に関する解説ページでは、拡張eコマースの設定方法については解説があるのですが、通常のeコマースについては解説がありません。こちらを応用することで、通常のeコマース設定も行うことが出来ましたので、設定方法を紹介いたします。続きを読むメッセンジャーアプリから訪れたユーザーの参照元ってどうなるの?こんにちは、連クミコです。「参照させてもらっているサイトからは私のこの行動が見えてるんだろうか?」と気になったもので、チャットアプリやメッセンジャーアプリから訪問したユーザーの、Googleアナリティクスでのトラッキングのされ方について調べてみました。続きを読むwebマーケティングの担当者が、最初に身につけるべき唯一のルールWebマーケターとして企業したい方、Webマーケティングのスキルを身につけたいディレクターさん、企業内のマーケティング担当者の方々にWebマーケティングノウハウを教える中で「これ気づいた瞬間、生徒さんの格段にスキルがアップする」というルールがあることに気づきました。このルールを紹介させていただきます。PMhttps://www.ja.advertisercommunity.com/からきました。GTMの設定、助かりました。ありがとうございます。私は、functions.phpを直接いじる度胸がないので、pluginを多用していいます。PMご覧いただきありがとうございます。専用プラグインについて記載した内容にリスクに関しても合わせて記載しましたが、functions.phpを触るリスクとプラグインを利用するリスクをふまえて選択されたのであれば、プラグインを利用するのも良いのではないかと思います。gtag.jsの設定を行っているのですが、うまくお問い合わせの計測がされません・・・。フォームが3つあり以下のようにfunctions.phpに記述しています。//「output」定義された内容を出力します}*****また、header.phpにgtagの埋め込みコードを入れており問い合わせ以外の計測はできております。何が原因か分かりませんでしょうか。PMGTMの場合でお聞きしたいのですが、別々のフォームが存在する場合、タグを「EV_お問い合わせ」「EV_申込み」と2つ作るのでしょうか。それとも一つでphp上のidで判断されるのでしょうか。AMGTMで計測されるのであれば、イベントアクションの値をdataLayerで出し分けられるので、タグはひとつ用意すれば十分ですよ。フォーム別のアクションの値の出し分け方については、過去に「異なるフォームをそれぞれ計測したい」とご質問された方への回答が、このコメント欄にあると思いますので、そちらを参考にしてみてくださいね。PM上記の設定でイベントトラッキングができました。ありがとうございます。上記で設定しているのですが、間違いがあればして頂けないでしょうか?何卒、宜しくお願いします。PM名無しのマーケターさん、当サイトをご覧になって頂き、ありがとうございます。目標設定の仕方については、他に「フォーム送信」というアクションのイベントをトラッキングされていなければ、記載いただいた手順で大丈夫だと思います。PMありがとうございます。↑上記の通りで無事成功しました。_)mサイト内の別々のフォームがあり、別々に設定したいのですが、idとCategoryとLabel以外に変更必要なポイントはありますでしょうか。PMご覧になって頂きありがとうございます!>サイト内の別々のフォームがあり、別々に設定したいのですが、idとCategoryとLabel以外に変更必要なポイントはありますでしょうか。'ラベル'});}で、動くのではと思いますので、おためしください(^_^)返信コメントいただく方は事前に下記ページをご一読ください。コメントをキャンセルメールアドレスが公開されることはありません。名前メールアドレスサイト上に表示された文字を入力してください。連クミコ広告代理店を経て、メーカーEC運用部門にてサイト構築運用・カスタマーオペレーション・ロジスティクスと広く経験した後、ブランディング及び販促戦略企画に携わり、現在は、フリーランスのWebアナリストをしています。アナリストと言う割には、Googleアナリティクスの隠れ仕様を探す方が好き。「レンさん」と呼ばれるのを密かに気にしています(連と書いてムラジと読みます)。Reserved.WebマーケティングGoogleアナリティクスWordPressカスタマイズ主婦のフリーランスな日常プライバシーポリシ。