Google Analyticsの解析タグをサイトやページに埋め込みたい SPIRAL ver.1 サポートサイト

Google Analyticsの解析タグをサイトやページに埋め込みたい

最終更新日:2021年11月24日

SPIRAL ver.1 のフォームは動的URLで入力ページ・エラーページ・確認ページ・完了ページなどが同一URLで展開します。

このような場合に、どのページか判別するために仮想URLを設定します。

※ 2021年11月現在の情報を元に作成しております。Google アナリティクス及び Google タグマネージャーは弊社のサポート対象外となります。

最新の仕様についてはGoogle社サポートサイトを参照ください。

1.Google AnalyticsのトラッキングIDの確認方法
2.Google Analyticsの計測タグの挿入方法
2-1.タグ設置例
2-2.貴社Webサイトとスパイラルで発行したWebフォームを1つのプロファイルで確認したい場合
3.Google タグマネージャー（GTM）の設置方法
3-1.GTMのタグの取得方法
3-2.GTMの設定方法

1.Google AnalyticsのトラッキングIDの確認方法

Google Anaitycs の管理画面より、管理＞プロパティ＞トラッキング情報＞トラッキングコード （2011年11月現在）よりご確認いただけます。

UA-*********-* がトラッキングIDになります。

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

2.Google Analyticsの計測タグの挿入方法

動的ページが表示された時に任意のURLを記録させることで、同一の URL でも別ページとして見分けることができます。

この任意のURLを仮想URLと呼びます。

SPIRAL ver.1 で発行したフォームには、入力ページ・確認ページ・サンキューページ・エラー表示ページなど複数ページがあるため、それぞれに計測タグを挿入します。

ページごとにページタイトル（<title></title>）と仮想URLを決めます。

【設定例】

ページ	ページタイトル	仮想URL
入力	お問い合わせフォーム（入力）	http://www.■■■.co.jp/contact/entry.html
入力エラー	お問い合わせフォーム（入力エラー）	http://www.■■■.co.jp/contact/entry-error.html
確認	お問い合わせフォーム（確認）	http://www.■■■.co.jp/contact/confirm.html
完了	お問い合わせフォーム（完了）	http://www.■■■.co.jp/contact/thankyou.html
システムエラー	お問い合わせフォーム（システムエラー）	http://www.■■■.co.jp/contact/sys-error.html
締切	お問い合わせフォーム（締切）	http://www.■■■.co.jp/contact/close.html

この任意の URL を記録させるには、解析コードに「pageview」の記述を追加します。挿入するソース（java script）は、<head></head>の冒頭に記載します。

【関連記事】

フォームのソースデザインを編集したい

2-1.タグ設置例

入力ページ

/* <head></head>の最初に挿入 */
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-＊＊＊＊＊＊＊＊-＊', 'auto');
ga('send', 'pageview', {
'page' : '/contact/entry.html',
'title' : ' お問い合わせフォーム（入力）'
});
</script>

このページが表示されると、「contact」というディレクトリの「entry.html」が表示されたものとして記録されます。

７行目のトラッキングコード（UA-*********-*）を書き換えてください。

9～10行目は、pageに任意のURLを、titleに分かりやすい名称に書き換えてください。

※解析コードはアップデートされ、javascriptのコードが変更される場合があります。設定の詳細や最新情報は、Google Analytics のヘルプセンターをご利用ください。

※貴社Webサイトとスパイラルで発行したWebフォームを1つのプロファイルで確認したい場合はこちらの内容をご確認ください。

【関連記事】

フォームのソースデザインを編集したい

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

確認ページ

/* <head></head>の最初に挿入 */
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-＊＊＊＊＊＊＊＊-＊', 'auto');
ga('send', 'pageview', {
'page' : '/contact/confirm.html',
'title' : ' お問い合わせフォーム（確認）'
});
</script>

このページが表示されると、「contact」というディレクトリの「confirm.html」が表示されたものとして記録されます。

７行目のトラッキングコード（UA-*********-*）を書き換えてください。

9～10行目は、pageに任意のURLを、titleに分かりやすい名称に書き換えてください。

【関連記事】

フォームのソースデザインを編集したい

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

完了ページ

/* <head></head>の最初に挿入 */
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-＊＊＊＊＊＊＊＊-＊', 'auto');
ga('send', 'pageview', {
'page' : '/contact/thankyou.html',
'title' : ' お問い合わせフォーム（完了）'
});
</script>

このページが表示されると、「contact」というディレクトリの「thankyou.html」が表示されたものとして記録されます。

７行目のトラッキングコード（UA-*********-*）を書き換えてください。

9～10行目は、pageに任意のURLを、titleに分かりやすい名称に書き換えてください。

【関連記事】

フォームのソースデザインを編集したい

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

システムエラーページ

/* <head></head>の最初に挿入 */
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-＊＊＊＊＊＊＊＊-＊', 'auto');
ga('send', 'pageview', {
'page' : '/contact/sys-error.html',
'title' : ' お問い合わせフォーム（システムエラー）'
});
</script>

このページが表示されると、「contact」というディレクトリの「sys-error.html」が表示されたものとして記録されます。

７行目のトラッキングコード（UA-*********-*）を書き換えてください。

9～10行目は、pageに任意のURLを、titleに分かりやすい名称に書き換えてください。

【関連記事】

フォームのソースデザインを編集したい

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

2-2.貴社Webサイトとスパイラルで発行したWebフォームを1つのプロファイルで確認したい場合

Google Analitics において、貴社Webサイトとスパイラルで発行したWebフォームを1つのプロファイルで確認したい場合、ドメイン間でクッキー情報を引き継ぐ記述を解析コードに追加します。

例：貴社Webサイトのドメイン　→　ABC.co.jp

SPIRALで発行したフォームのドメイン　→　regist**.smp.ne.jp

赤字部分は、解析コードを設置する場所に合わせて編集します。

・貴社 Web サイトに挿入する解析コード
スパイラルで発行した Web フォームのドメイン

・スパイラルで発行した Web フォームに挿入する解析コード
貴社 Web サイトのドメイン

/* <head></head>の最初に挿入 */
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-＊＊＊＊＊＊＊＊-＊', 'auto', {'allowLinker':true});
ga('require', 'linker');
ga('linker:autoLink', ['regist＊＊.smp.ne.jp'] );
ga('send', 'pageview', {
'page' : '/contact/entry.html',
'title' : ' お問い合わせ（エントリー）'
});
</script>

7行目'auto', ~9行目を追加します。

9行目[‘regist**.smp.ne.jp‘]の赤字部分は、解析コードを設置する場所に合わせて編集します。

・貴社Webサイトに挿入する解析コード

スパイラルで発行したWebフォームのドメイン

・スパイラルで発行したWebフォームに挿入する解析コード

貴社Webサイトのドメイン

※プロファイルにて、各ドメインを参照元として表示したくない場合は、Google Analytics の「アナリティクス設定」から「参照元除外リスト」を編集してください。

【関連記事】

フォームのソースデザインを編集したい

【参考URL】

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

サイトに gtag.js を追加する | ウェブ向けアナリティクス（gtag.js） | Google Developers

3.Google タグマネージャー（GTM）の設置方法

動的ページが表示された時に任意のURLを記録させることで、同一の URL でも別ページとして見分けることができます。

この任意のURLを仮想URLと呼びます。

ページごとにページタイトル（<title></title>）と仮想URLを決めます。

【ページタイトルと仮想URLのリスト】

ページ	ページタイトル	仮想URL
入力	お問い合わせフォーム（入力）	http://www.■■■.co.jp/contact/entry.html
入力エラー	お問い合わせフォーム（入力エラー）	http://www.■■■.co.jp/contact/entry-error.html
確認	お問い合わせフォーム（確認）	http://www.■■■.co.jp/contact/confirm.html
完了	お問い合わせフォーム（完了）	http://www.■■■.co.jp/contact/thankyou.html
システムエラー	お問い合わせフォーム（システムエラー）	http://www.■■■.co.jp/contact/sys-error.html
締切	お問い合わせフォーム（締切）	http://www.■■■.co.jp/contact/close.html

※ページタイトル、仮想URL（赤字部分）は分かりやすい任意の文字を設定してください。必ずしも上記記載にある文言と同様にする必要はありません。

この任意の URL を記録させるには、解析コードに「pageview」の記述を追加します。挿入するソース（java script）は、<head></head>の冒頭に記載します。

設定手順

① 対象ページのリストを作成

② ページタイトルを対象ページに反映

③ リストを変数として、GTMに登録

3-1.GTMのタグの取得方法

コードの確認方法

GTMの管理画面でコンテナを選択したあと、上部に並んでいる「ワークスペース　バージョン　管理」のメニューから「管理」を開きます。

コンテナのメニューから「Googleタグマネージャーをインストールする」を開きます。

2つのソースが表示されるので、それを計測したいページに挿入してください。

※ この情報は2021年11月現在のものです。UIやタグなど変更になる可能性があるため、必ずGoogle タグマネージャーにログインし確認するようにしてください。

（ソース例）

以下、参考として2021年11月現在のタグを掲載しています。設定する際にはかならず上記記載の方法で取得したソースを挿入ください。

下記ソースをページの <head> 内のなるべく上のほうに貼り付けてください。

<!-- Google Tag Manager --><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-******');</script> <!-- End Google Tag Manager -->

開始タグ <body> の直後にこのコードを次のように貼り付けてください。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-*******"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

3-2.GTMの設定方法

Google タグマネージャーの設定は下記の4つを行います。

既に、Google アナリティクスユニバーサルアナリティクスの設定がお済の場合は②から設定をします。

① タグ：Google アナリティクスユニバーサルアナリティクス

② 変数：ページタイトル

③ 変数：仮想PV用URLのルックアップテーブル

④ 変数：Google Analytics　のプロパティID

※ Google タグマネージャーの設定方法は、Google社が運営するタグマネージャーヘルプ「タグマネージャーの設定とインストール」を参照ください。

① タグ：Google アナリティクスユニバーサルアナリティクスの設定

タグの種類	Google アナリティクス:ユニバーサルアナリティクス
トラッキングタイプ	ページビュー
Googleアナリティクス設定	変数：Googleアナリティクス設定
このタグでオーバーライド設定を有効にする	有効にしない（チェックボックスにチェックを入れない）
詳細設定	なし
配信トリガー	ALL Pages

② 変数：ページタイトル

変数のタイプ	Javascript 変数
グローバル変数名	document.title

仮想URLを記録するため、ページのタイトルを取得します。

③ 変数：仮想PV用URLのルックアップテーブル

変数のタイプ	ルックアップテーブル
変数を入力	変数：タイトル
デフォルト値を設定	変数：Page Path

ルックアップテーブルとして、「ページタイトルと仮想URLのリスト」の情報を登録します。

変数：タイトルを取得し、ルックアップテーブルの「入力」（ページタイトル）と突き合わせ、該当する者があれば「出力」（仮想URL）を返すという働きをします。該当するものがない場合は、デフォルト値に設定しているページのURLを返します。

④ 変数：Google Analytics のプロパティID

変数のタイプ	Google アナリティクス設定
トラッキングID	GAのトラッキングID（UA-********-）
Cookieドメイン	auto

・詳細設定＞設定フィールド

allowLinker	true
page	変数：仮想PV用URL

allowLinkerは、下のクロスドメイントラッキングに付随するもので、複数ドメインをまたいで計測する場合に必要です。

ただし、別ドメインのページにも同じGTMコードが入っている必要があります。

pageデータとして、仮想PV用URLで設定したデータを反映するように設定します。

・詳細設定＞クロスドメイントラッキング

自動リンクドメイン

www.***********.co.jp

※ フォームのドメインを記入

区切り文字としてハッシュを使用

False

装飾フォーム

True

※ 2021年11月に作成しています。Google アナリティクス及び Google タグマネージャーの仕様が変更になる可能性もあるため、最新の設定情報はGoogle社のサポートサイトを参照ください。

【関連コンテンツ】

・Webアクセス解析はできますか？

・メールマガジンからのアクセスを解析するには？