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

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

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

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

アカウントの作成

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

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

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

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

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

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

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

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

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

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

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

トリガーの設定をする

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

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

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

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

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

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

フォームメーラーの送信完了画面のURLは以下の仕様となっています。
https:// ○○○.form-mailer.jp/fms/（フォームキー）/submissions/thanks/submission_id=（投稿ごとにことなる文字列）

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

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

タグの設定

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

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

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

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

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

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

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

プレビューの実行

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

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

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

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

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

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

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

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

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

公開

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

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