誰かに聞きたい!Googleタグマネージャーの設定方法

Googleタグマネージャーの設定方法をやさしく解説

フォームメーラー有料版(Pro版/Business版)ではフォームとランディングページに 「Googleタグマネージャー」を設定することができることをご存じですか?
知っていてもGoogleタグマネージャーは設定方法が難しくて、何をすればいいのかよく分からない・・・。
そんな理由で少し興味はあるけど使わずにいる、なんてことはないでしょうか。

よく分からないから使わずにいるのであれば、とても勿体ないほどGoogleタグマネージャーは便利なサービスです。

今回は基本的な機能に絞って、Googleタグマネージャーの設定手順をご紹介します。
Googleタグマネージャーは様々な機能があり、すべてを説明することはできませんが、 どんなサービスでどんなことができるのか?
設定するうえで知っておきたい仕組みなど基本的な部分をお伝えできればと思います。
(2021年9月20日時点の設定手順です。Googleタグマネージャーは定期的に仕様や画面のインターフェースが変わるのでご注意ください)

目次

  1. アカウントの作成
  2. フォームメーラーに設定する
  3. トリガーの設定をする
  4. タグの設定
  5. プレビューの実行
  6. 公開
  7. まとめ

1. アカウントの作成

まずはGoogleタグマネージャーにアカウントを作成しましょう。 もしGoogleそのもののアカウントをお持ちでない場合はGoogleのアカウントを作成した上で、以下のURLにアクセスしてください。

▼Googleタグマネージャー
https://marketingplatform.google.com/intl/ja/about/tag-manager/

「無料で利用する」ボタンからスタートです。

「無料で利用する」ボタンからスタート

アカウント名とコンテナ名を入力しましょう。ターゲットプラットフォームは「ウェブ」で問題ありません。

アカウント名とコンテナ名を入力

利用規約に同意してアカウントの作成を完了します。

利用規約に同意してアカウントの作成を完了

サイトに設置するGoogleタグマネージャーのタグ(コード)が表示されますがフォームメーラーではタグそのものを利用することはありません。

さあ、これでGoogleタグマネージャーの利用をはじめる準備が整いました。 早速管理画面を見てみましょう。
タグマネージャーではワークスペースと呼びます。

2. フォームメーラーに設定する

画面左側のメニュー

画面左側のメニューを見てみましょう。Googleタグマネージャーでは「ワークスペース」内で「タグ」を作成し「トリガー」でタグが出力(発火)される条件を設定して「サマリー」内で確認する、というイメージで設定します。

さっそくワークスペースで設定を開始したいところですが、 まずはフォームメーラーにGoogleタグマネージャーの設定しましょう。 画面上部ヘッダーから「GTM-●●●●●●●●」で表示されているコンテナIDを確認してください。

画面上部ヘッダー フォームメーラーにGoogleタグマネージャーの設定

フォームメーラーの管理画面にログインし、Googleタグマネージャーを設定したいフォームの「環境設定」→「トラッキングコード設定」より「Googleタグマネージャーのコンテナ設定」を「利用する」とします。
コンテナIDの入力欄にGoogleタグマネージャーの管理画面より確認したコンテナIDを入力してください。
これでフォームメーラーとGoogleタグマネージャーの連携が設定されました。

3. トリガーの設定をする

Googleタグマネージャーの設定はどの順番で行っても問題ありませんが、今回は「トリガー」から進めていきます。

トリガーとは、タグが発火するための条件です。 決められたページが表示された時に発火、決められたボタンがクリックされたら発火、 などさまざまな条件を設定可能です。

メニューからトリガーを選択し「新規」から新しいトリガーを作成しましょう。

メニューからトリガーを選択し「新規」から新しいトリガーを作成 管理しやすいようにトリガー名を入力

管理しやすいようにトリガー名を入力しましょう。 実際に設定するには右上の鉛筆アイコンをクリックします。

トリガーのタイプを選択します。 いろいろな種類があるのですが、フォームに設定するには「ページビュー」で問題ありません。

トリガーのタイプを選択 トリガーの設定

トリガーでは「PageURL」「先頭が一致」「タグを出力したいページのURL」を順番に設定します。
今回はランディングページを設定して進めていきますが、投稿完了画面でタグを出力したいなら送信完了画面のURLのフォームキーまでのURLを設定します。
※フォームキーとはフォームのURLの後ろ部分のフォームごとに異なる文字列部分です。
https://pro.form-mailer.jp/fms/1a6b5981212306 ←赤字の部分がフォームキー

フォームメーラーの送信完了画面のURLは以下の仕様となっています。
https:// ○○○.form-mailer.jp/fm/service/Forms/thanks/(フォームキー)/(投稿ごとに異なる文字列)

この場合は
https:// ○○○.form-mailer.jp/fm/service/Forms/thanks/(フォームキー)/
までを先頭一致の条件として設定してください。

これで「何らかのタグが発火するための条件(トリガー)」の設定ができました。次は実際に発火させたいタグを設定していきましょう。

4. タグの設定

メニューの「タグ」を選択し「新規」をクリック。

メニューの「タグ」を選択し「新規」をクリック タグに名前を設定し、「タグの設定」カードの右上の鉛筆アイコンをクリック

タグに名前を設定し、「タグの設定」カードの右上の鉛筆アイコンをクリックします。

タグのタイプを選択しましょう。
例えばGoogle広告のタグなど、あらかじめ用意されているタグであれば簡単に設定できます。

今回は設定手順の説明をするために用意されていないタグを使用する想定で進めます。「カスタムHTML」を選択しましょう。

タグタイプを選択 タグの設定

HTMLのコード入力欄にタグのHTMLを入力します。本来画像のタグを入力する場合はカスタムHTMLタグではなくカスタム画像を使うべきですが、今回は説明のためにあえて画像のimgタグを入力しています。

<img src="https://www.form-mailer.jp/_nuxt/assets/img/id.svg" />
フォームメーラーのロゴ画像のタグですね。

トリガーの選択

画面下の「トリガー」に先ほど作成したトリガーを設定します。トリガーの条件に設定したページが表示された時に、このタグが発火することになります。

5. プレビューの実行

さて、簡単な設定ができました。
しかし、実際にうまく設定できているか分からないうちから本番公開することはタグによっては大きなリスクがあります。
「プレビュー」機能で、タグが思った通りに動作するかテストを行いましょう。

ヘッダーの「プレビュー」をクリックします。

ヘッダーの「プレビュー」をクリック

サイト確認のポップアップウィンドウが表示されます。 Googleタグマネージャーを設定したサイトのURLを要求されているのですが、今回はページのURLごと設定しましょう。

URLを入力したら「Connect」をクリックします。

URLを入力したら「Connect」をクリック ページ内にロゴ画像が表示

新しくタブが開き、指定したページが表示されます。
今回フォームメーラーのロゴ画像のタグを設定したのですが、ページ内にロゴ画像が表示されているのがわかります。

もとのプレビューのタブに戻ると、「Tags Fired」欄に先ほど作成したタグが表示されています。
いまこのページでこのタグが発火しているよ、と分かるようになっているんですね。
今回は分かりやすいよう画像でタグを作成しましたが、成果タグなど画面を見ても発火しているかどうかわからない場合はここで発火しているか確認するわけです。

思ったように発火していない場合は、トリガーの設定を見直してみましょう。

Tags Fired トリガーの設定を見直し

タグをクリックするとより詳しく情報を参照できます。
ちなみに、ブラウザを変えてページにアクセスしてみると、ロゴ画像は表示されていません。
Googleタグマネージャーのプレビュー機能でのみ表示されていることが分かります。

Googleタグマネージャーのプレビュー機能でのみ表示

プレビューを終了するには左上の「×」をクリックします

プレビューを終了するには左上の「×」をクリック

6. 公開

さて、プレビューで問題なく動作していることを確認できたら、いよいよタグを公開しましょう。
プレビューボタンの右側にある「公開」ボタンをクリックします。
公開にあたって変更を行った内容を記録する画面が表示されます。
Googleタグマネージャーでは公開するごとにバージョン情報として記録されますので、いつでも以前の公開したバージョンに差し戻したり、切り替えたりが可能です。

そういった時のために、今回公開するバージョンはどのような変更や設定を行ったものか分かりやすく情報を記載しておきましょう。

変更の送信

必要な情報を入力したら「公開」ボタンをクリックします。

どのブラウザで確認しても、画面にロゴ画像が表示

どのブラウザで確認しても、画面にロゴ画像が表示されるようになりました!

7. まとめ

いかがでしょうか。
駆け足ではありますが、Googleタグマネージャーの設定手順を紹介しました。
Googleタグマネージャーを駆使すればCSSの設定も可能ですし、ページの利用用途の幅は大きく広がります。

フォームメーラーでは対応していないちょっとした機能であればGoogleタグマネージャーを利用することで実現できる場合もありますので、ぜひお試しください。

また、Googleタグマネージャーを利用して、異なるドメインのページをまたいだアクセスをGoogleアナリティクス上でひと続きのものとして計測する「クロスドメイントラッキング」の設定方法を近日公開予定です。 あわせて参考にしていただければと思います。

GoogleタグマネージャーはPro版とBusiness版の標準機能として提供しています。
ちょっと試してみたい・・と感じたならBusiness版をご利用ください。 フォームメーラーBusiness版は14日間であれば無料で使えます。

氏名・メールアドレスのみで1分で登録可能ですので、いますぐお試しいただけますよ!
(14日以降ご利用いただくにはライセンスの購入が必要です)

今すぐ無料ではじめる