Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブgoogle-tag-manager

2018年3月9日 By KD コメントを書く

GoogleタグマネージャでWordPressブログ内の広告クリックをトラッキングする方法

GoogleタグマネージャでWordPressブログ内の広告クリックをトラッキングする方法

アフィリエイトを始めて広告をブログに貼り出すと、それらの広告がどの程度クリックされたかが気になります。各アフィリエイトのサイトでクリックされたかどうかは確認することができますが、複数のアフィリエイト先を登録している場合に全てのサイトを確認するのは面倒ですし、ブログに複数広告を掲載している場合はどこに掲載した広告がクリックされたかを知るのは難しいです。今回は、Googleタグマネージャを利用してクリックをトラッキングし、一元的にクリックのイベントを管理する方法を紹介します。

はじめに

以前にお届けした以下の2回の記事で、広告を無料でトラッキングするにはGoogleタグマネージャ(Google Tag Manager)が有効であることと、GoogleタグマネージャとGoogleアナリティクスの連携方法をお伝えしました。

WordPressブログに広告を自由自在に配置するための無料のプラグイン4選

WordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定する方法

今回は、それらの作業がが完了している前提で、Googleタグマネージャを使って、広告のクリックをトラッキングする方法を紹介します。

この方法では、無料でクリックのトラッキングが可能になる上に、複数のアフィリエイト先がある場合に、それらのクリックを一元的に管理できる点がメリットです。そして、少し工夫することで、ブログのどこに貼ったどの広告がクリックされたかも測定できるようになるため、クリック率を上げたい場合は有用です。

Googleタグマネージャにクリックイベントを登録して配信する

今回は例として、アフィリエイトを始める人は誰もが最初に登録するA8.netの場合を考えることにします。

トリガーを作成する

まずは、Googleタグマネージャの右側のメニューから「トリガー」をクリックします。

スクリーンショット 2018 02 05 15 18 00

「新規」をクリックします。

スクリーンショット 2018 02 05 15 18 11

トリガーのタイプですが、今回はアフィリエイトリンクのイベントのトラッキングを作成するので、「リンクのみ」を選択します。

スクリーンショット 2018 02 05 15 20 09

以下のように内容を記入し、「保存」をクリックします。

スクリーンショット 2018 02 05 15 19 34

  • トリガー名: 任意
  • トリガー種類: クリック・リンクのみ
  • タグの配信を待つ: Yes。待ち時間はデフォルトでOK。
  • 妥当性をチェック: 厳密に確認した場合だけYesを選ぶ。NoでもOK。
  • これらすべての条件がtrueの場合にこのトリガーを有効化: Page URL = 含む = 自分のサイトのURL
  • このトリガーの発生場所: 一部のリンククリック
  • イベント発生時にこれらすべての条件がtrue の場合にこのトリガーを配信します: Click URL = 含む = アフィリエイトリンク

ここでイベントの発生条件の「Click URL」に指定している「px.a8.net」は、A8.netのアフィリエイトリンクに必ず含まれている値です。なので、この場合は、全てのA8.netのアフィリエイトリンクのクリックをトラッキングすることを意味しています。

イベントトラッキングの設定例は、公式ヘルプのここやここにも記載があるので、必要に応じて参照して下さい。

イベント発生条件の種類

今回はイベントの発生条件として「Click URL」だけを使用していますが、ここを工夫することでいろいろなパターンのクリックを検知できるようになります。

クリックに関しては以下のイベント発生条件を指定できます。

  • Click Element … クリックされたリンクのDOM要素
  • Click Classes … クリックされたリンクのclass属性
  • Click ID … クリックされたリンクのid属性
  • Click Target … クリックされたリンクのtarget属性
  • Click URL … クリックされたリンクのURL
  • Click Text … クリックされたリンクの文字列

詳しくは公式のドキュメントを参照して下さい。

例えば、ある特定の場所に配置している広告に同じclass属性を付け、イベントの発生条件に「Click Classes」を指定すれば、クリックされた場合にどこの広告がクリックされたか判断可能です。ただし、アフィリエイトASPの規約違反になっていないかは確認が必要です。

タグを作成する

次にタグを作成していきます。右側のメニューの「タグ」をクリックします。

スクリーンショット 2018 02 05 15 20 31

「新規」をクリックします。

スクリーンショット 2018 02 05 15 20 40

タグタイプは「ユニバーサル アナリティクス」を選択します。

スクリーンショット 2018 02 05 15 21 24

続けて内容を入力し、「保存」をクリックします。

スクリーンショット 2018 02 05 15 21 48
スクリーンショット 2018 02 05 15 22 11

  • タグ名: 任意
  • タグタイプ: ユニバーサル アナリティクス
  • カテゴリ: 任意
  • アクション: Page URL を選択
  • ラベル: Click URL を選択
  • Googleアナリティクス設定: 以前の記事で作成したユーザ定義変数「Googleアナリティクス設定」を選択

このイベントトラッキングパラメータの「カテゴリ」、「アクション」、「ラベル」、「値」は、後でGoogleアナリティクスでクリックのトラッキングの状況を確認する場合に自動的に振り分けられる分類です。なので、’各々の見やすい分類になるように自由に値を設定して下さい。今回の設定は一例になります。

クリックイベントのタグを公開する

最後に作成したクリックイベントのタグを公開しましょう。

プレビューしてテストする

公開する前に、ちゃんとタグが配信され、クリックされた時にイベントが検知されるかを確認する必要があります。

詳しくは以前の記事を参照して下さい。

公開する

タグがちゃんと動作することが確認できたら、右上の「公開」ボタンをクリックして、バージョン名(任意)を入力して公開すれば完了です。

スクリーンショット 2018 02 05 15 22 34

最後に

いかがでしたか?これで無料で広告のクリックのトラッキングを一元管理できるようになりました。今回の設定は一例なので、各々で測定したい内容に応じてタグを作ってみて下さい。ちなみに、この方法でのGoogle AdSenseのトラッキングは、アドセンス停止になるリスクがあるため、実施しない方が良いでしょう。あくまで通常のアフィリエイトのリンクにのみ使って下さい。では。

カテゴリ : ライフハック タグ : ads, google-tag-manager

2018年3月5日 By KD コメントを書く

WordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定する方法

WordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定する方法

ブログをやっているとGoogleアナリティクス用のタグを埋め込む必要があったり、Google AdSense用のタグを埋め込む必要があったりと、やたらとタグを埋め込む必要が生じます。だいたいHTMLのヘッダーに直接タグを埋め込むことになるのですが、タグが増えてくるとどこにタグを書いたのか煩雑になってきます。今回はGoogleタグマネージャでタグを整頓して管理可能にし、配信する方法を紹介します。

Googleタグマネージャとは?

Googleタグマネージャ(Google Tag Manager: GTM)とは、Googleアドセンス(Google AdSense)といった広告のタグやGoogleアナリティクス(Google Analytics)といったアクセス解析のタグなどを一元管理するためのタグ管理サービスです。

通常タグを設定する場合は、タグ毎にHTMLのヘッダーにスクリプトを書く必要がありますが、Googleタグマージャを使った場合は、GTMのタグを一つだけ埋め込むだけで良くなり、タグの管理が簡単になるというところがメリットです。

事前準備

設定方法に入る前に事前に以下の作業を完了して下さい。

GoogleタグマネージャとGoogleアナリティクスの登録

Googleのアカウントを作成し、GoogleタグマネージャとGoogleアナリティクスの登録を完了して下さい。自分のブログとの紐付けが完了している必要があります。

ブログのヘッダにGoogleタグマージャのタグを埋め込む

普通にGoogleタグマネージャのスクリプトをヘッダに埋め込めばOKです。

WordPressの場合は、「Google Tag Manager for WordPress」というプラグインがあるので、それを使えばGoogleタグマネージャのIDを入力するだけで完了します。

GTM4WP
GTM4WP
Download QR-Code
GTM4WP
Developer: Thomas Geiger
Price: Free

スクリーンショット 2018 02 05 1 24 57

GoogleタグマネージャによるGoogleアナリティクスの設定方法

それでは設定をしていきましょう。Googleタグマージャから対象のブログを選び、メイン画面を表示して下さい。

Googleアナリティクスの変数を作成する

左側のメニューの「変数」をクリックします。

スクリーンショット 2018 02 05 0 43 51

「ユーザー定義変数」から「新規」をクリックします。

スクリーンショット 2018 02 05 0 44 15

変数のタイプは「Googleアナリティクス設定」を選択します。

スクリーンショット 2018 02 05 0 44 50

トラッキングIDにはGoogleアナリティクスのIDを設定します。名前は任意で構いません。

スクリーンショット 2018 02 05 0 46 54

右上の「保存」をクリックすれば変数作成は完了です。

タグを作成する

次に、左側のメニューの「タグ」をクリックします。

スクリーンショット 2018 02 05 0 47 20

「タグ」から「新規」をクリックします。

スクリーンショット 2018 02 05 0 47 35

タグのタイプは「ユニバーサル アナリティクス」を選択します。

スクリーンショット 2018 02 05 0 48 00

トラッキングタイプには「ページビュー」を、Googleアナリティクス設定には先程作成したユーザー定義変数を選択します。

スクリーンショット 2018 02 05 0 50 22

トリガーには「All Pages」を選択します。

スクリーンショット 2018 02 05 1 02 02

右上の「保存」をクリックすればタグ作成は完了です。

公開する

タグの作成が完了したので、そのタグをブログに公開します。

上のメニューにある「公開」ボタンをクリックします。

スクリーンショット 2018 02 05 0 50 58

すると以下の画面が表示されるので、「バージョン名」に任意の名前を付けて「公開」をクリックします。「バージョン名」は新しく追加や変更したタグの概要が分かるような名前を付けると良いでしょう。

スクリーンショット 2018 02 05 0 51 25

これで、ブログにGoogleアナリティクスのタグが配信されました。

タグのプレビュー方法

ここまででタグの公開は完了していますが、ちゃんとタグが配信されているかを確認する「プレビュー」の方法も紹介します。

タグのプレビューを開始する

上のメニューにある「プレビュー」ボタンをクリックします。

スクリーンショット 2018 02 05 0 52 06

するとワークスペースがプレビュー中の表示になります。

タグのプレビューを確認する

プレビュー中の状態で自分のウェブサイトを確認してみましょう。すると右下に以下のアイコンが出現します。

スクリーンショット 2018 02 05 0 54 11

これをクリックすると、Googleタグマネージャのプレビュー表示を確認できます。以下の場合は、先程公開した「Google Analytics タグ」がちゃんと配信され、イベントとして発火していることが確認できます。

スクリーンショット 2018 02 05 0 53 14

タグのプレビューを終了する

プレビューを終了する場合は、「プレビューモードを終了」をクリックすればOKです。

スクリーンショット 2018 02 05 0 52 24

最後に

いかがでしたか?ここまで来た皆さんは自身のWordPressブログにGoogleタグマネージャ経由でGoogleアナリティクスを設定できたと思います。素晴らしいことに、今後は新しいタグを追加したい場合にスクリプトを直接HTMLに埋め込む必要はなく、Googleタグマネージャを使うことで一元管理して公開できます。では。

カテゴリ : ライフハック タグ : google-analytics, google-tag-manager, wordpress

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)
    DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes