MAGIC LPO ヘルプページ/4️⃣Googleアナリティクス4（GA4）のMagicLPO用の設定
4️⃣

Googleアナリティクス4（GA4）のMagicLPO用の設定

💡
このページでは、MAGIC LPOを使用する際に必要な最初のステップであるGoogleアナリティクスの設定方法を解説しています。
目次

Google アナリティクス4 連携に必要な権限

Google アナリティクス4“管理者”、”編集者”、”マーケティング担当者”、”アナリスト” または”閲覧者”の権限
MAGIC LPO”オーナー”、”編集者”または”閲覧者”の権限
Google タグマネジャー“公開”の権限
💡
Google タグマネジャーの権限は、[管理]>[ユーザー管理]から確認&編集することができます。

Google タグマネジャーでA/Bテスト用のイベントを用意する (revision_idの設定方法)

Google アナリティクス4とMagic LPOを接続する前に、Magic LPOのA/Bテスト機能が正しく使えるようにrevision_idイベントの設定というものを行なっていきます。
  1. Googleタグマネジャーにアクセスし、タグをクリックしてください。
  1. 新規タグを作成してください。
  1. タグを設定をクリック
  1. Google アナリティクスを選択してください。
 
  1. GA4イベントを選択
  1. 以下の画面が表示されます。以下の画面の赤枠(測定 ID）を入れていきます。
  1. 別のタブでGoogleアナリティクス４を開いて、左下の「歯車」マークをクリックし、「データストリーム」をクリックします。
  1. データストリームの「>」をクリック
  1. 測定IDをコピーしてください。
  1. Google タグマネジャーの画面に戻って、赤枠にステップ９でコピーした測定IDをペーストします。
  1. 測定ID を記入することができました。「このコンテナでGoogle タグが見つかりました。」と表示されていたら成功です。失敗した場合は、Google タグマネジャーとGoogle アナリティクスの接続がうまくできていない可能性があるので、以下の画面が表示されるので、「測定ID」をコピーします。 から設定が手順通りにできているか再確認してください。
  1. イベント名には”revision_id”と記入してください。
  1. プルダウンのイベントパレメータを選択して、以下のように記入してください。
  1. 値のボックスの右端をクリックします。
  1. 変数を選択画面で、「+」を選択します。
16. データレイヤーの変数を選択してください。
  1. 赤枠の通りに記入して、保存ボタンを押してください。
  1. 保存ボタンを押したら、値に{{revision_id}}と記入されていることがわかります。 次にユーザープロパティを設定していきます。プロパティ名に”revision_id”と記入し、値のボックスの右端をクリックしてください。
  1. revision_idが表示されるので、選択します。
  1. これでタグの設定は完了しました。次は、トリガーの設定をしていきます。
  1. トリガーをクリックして、「+」をクリックしてください。
  1. カスタムイベントを選択してください。
  1. 以下のようにカスタムイベント名を「revision_event」に設定してください。
  1. タグ名を記入して、保存を押してください。
  1. 次に、revision_id storage Handlerというタグを作成します。
26新規タグを作成してください。タグの名称はrevision_id storage Handlerです。
  1. タグの設定をクリック>カスタムHTMLをクリック
  1. 以下のコードをHTML部分にペースト
  1. トリガーを選択します。
  1. トリガーとしてInitialization - All Pagesとrevision_eventを選択してください。

カスタムイベントclick_lpoを作成する

次にGoogle Tag Manager(GTM)でカスタムCVイベントを作成し、MAGIC LPOで作成したカスタムCVイベントを計測できるようにする方法を解説していきます。
CVイベント(コンバージョンイベント)とは
CVイベントとはコンバージョンイベントといい、ランディングページがサイト訪問者にとって欲しい行動のことを指します。例えば、MAGIC LPOのランディングページはサイト訪問者にこのボタンをクリックしてもらうことがサイトの目的です。よって、このサイトでは”紫色のボタンをクリックされること”がコンバージョンイベントということです。 このようなコンバージョンイベントは自分で設定する必要があります。自分で設定した小ンバージョンイベントは”カスタムコンバージョン(CV)イベント”と呼ばれることもあります。
 
MAGIC LPOでコンバージョン数(CV数)を計測するには自分でCVイベントを設定する必要があります。早速CV要素の特定から始めましょう。

1. CV要素の特定

　まず、CVとして利用するボタンの設定をDeveloper tool を利用して確認します。
  1. CVイベントを作成したいサイトを開き、①から③の順番でディベロッパーツールを開いてください。
2. 下の画像のような画面が出てくるので、赤枠のボタンをクリックします。
  1. CVイベントを発火させたい場所にカーソルを合わせてください。例えば、今回は「登録して始める」という紫のボタンまたは、「ダッシュボード」というボタンをクリックしたときにCVイベントを発火させたいとします。その場合は紫のボタンと「ダッシュボード」にカーソルを合わせてください。ボタンにカーソルを合わせるとボタンの情報が表示されます。
  1. 例えば、今回は「登録してはじめる」と「ダッシュボード」ボタンのclass名が両方同じ”go_magic_lpo”だったとします。その場合、この”go_magic_lpo”という名前を使ってCVイベントを設定していきます。
 
“go_magiclpo”のようにclass名が共通のものがなかった場合は、
　・ボタンのtext名 　・リンク先のURL
で共通しているものを探します。共通するものがなければ、CVイベントを発火したいボタンの独自のclass名、text名、またはURL名をメモしておいてください。

2,GTM側での設定

  1. 次にGoogle Tag Manager(GTM)を開いてください。
  1. 「変数」>「組み込み変数」>「設定」をクリックし、必要な変数を選択します。今回の例ではクリックの変数が必要なのでクリックのの変数をすべてオンにしておきます。
  1. 次にタグを新規作成してください。
  1. 「タグの設定」＞「Google アナリティクス」を選択します。その後、「Google アナリティクス：GA4イベント」をクリックしてください。
  1. 「測定ID」にGoogle アナリティクス4でステップ9（外部リンクを参照）で取得した測定IDを張り付けてください。
  1. 「イベント名」に「click_lpo」と記入します。
⚠️
Magic LPOのA/Bテストで測定したいCVイベントはすべてイベント名を”click_lpo”と命名してください。
  1. イベントパラメータに「revision_id」を追加します。イベントパラメーター>「パラメーターを追加」をクリック＞イベントパラメーターに”revision_id”と記入してください。
 
  1. 値を記入するときは+ボタンをクリックしてください。
  1. その後、+ボタンをクリックしてください
 
  1. revision_id storageと名称を記入します。
  1. 変数の設定をクリックしてカスタムJavaScriptを選択します
  1. 以下の状態になったら保存ボタンを押します。
  1. 作成した変数’(revision_id storage)をユーザープロパティにも追加してください
  1. 下にスクロールして、次に「トリガー」を作成します。「トリガー」をクリック>「＋」をクリックしてください。
  1. 「トリガーの設定」をクリックしてトリガーのタイプを選択します。今回の例であれば「すべての要素」を選択します。
  1. CVイベント(タグ)を発火させたい条件を追加します。今回はクリックしたボタンのclass名が”go_magiclpo”の時に発火させたいので、一部のクリックを選択します。左側のプルダウンで「Click Classes」を選択、真ん中のプルダウンでは「含む」を選択し、右のボックスには”go_magiclpo”と記入してください。記入後はトリガーに任意の名前をつけて「保存」をクリックします。
 
  1. タグの設定画面に戻るので「保存」をクリックしてください。

3. GTM Previewで確認

次に作成したカスタムCVイベント(タグ)が指定した通りに発火するか、GTMpreviewで動作確認をします。
  1. 右上の「プレビュー」を選択します。
  1. GTM Previewが表示されるので、表示するwebサイトのURLを入力し、リンクを押してください。
  1. すると、URLを記入したwebサイトが出てくるのでそこでカスタムCVイベントを発火させる操作を行います。　
  1. カスタムCVイベントを発火させる操作を行った後は「Tag Assistant [接続済み]」というタブを開いてください。①の部分がユーザーが行った操作が表示されています。行った操作に対して今回作成したカスタムCVイベントが配信されていたらカスタムCVイベントが目的通り設定できています。 今回の例では①の部分に表示されている「クリック」を選択したときに②の部分にタグの名称である「click_lpo」が表示されていたら成功です。表示されていない場合は、トリガーの設定が間違えているのでステップ8に戻ってトリガーの設定をやり直してください。
  1. 3が完了したら「公開」を押してください。
  1. 任意の名前を「バージョン名」に記入して「公開」ボタンをクリックしたら完了です。
  1. [重要]バージョンを公開して24時間程度後、Googleアナリティクス4(GA4)にアクセスしてください。「管理」＞「イベント」画面を開くと、click_lpoというイベントが表示されているので、click_lpoの「キーイベントとしてマークをつける」をオンにしてください。 この時にrevision_idというイベントの「キーイベントとしてマークをつける」もオンになっているか確認してください。オンになっていなかったらオンにしてください。
  1. 以上でCVイベント(click_lpo)の設定が完了です。click_lpoの「キーイベントとしてマークをつける」をオンにした24時間程度後にMagic LPOでA/Bテストが実施できるようになります。

GTMで設定したタグを公開する

  1. バージョン名を記入して公開してください。
  1. 公開したバージョンが最新 かつ ライブになっていれば、完了です。(ステータスが画像と異なる場合は、必要な権限が与えられていない場合があるので、貴社のGoogle タグマネジャー管理者に、公開者権限を付与してもらうよう、依頼してください。)
 
  1. バージョンを公開して24時間後、GA4にアクセスして、こちらの方法でrevision_idをキーイベントに設定してください。これでrevision_idの設定が完了です。

MAGIC LPOで新規アカウント登録・パスワード再設定する方法

以下のページをご覧ください。
3️⃣新規アカウント登録・パスワード再設定方法
 

分析したいページが少ない場合(1~3ページ)：MAGIC LPOのタグを直埋めするアナリティクス4 (GA4)の連携手順

💡
分析したいページが多い方は、こちら の手順で設定を行なってください
  1. 左のメニューから「プロジェクト設定画面」へ移動します。
  1. 「分析を開始するための設定をする」をクリックします。
  1. 「分析するサイトのドメイン」で分析をしたいサイトのドメインURLを入力します。
サイトのドメインとは？
サイトのドメインとは、インターネット上でサイトがどこにあるかを示す住所の様な役割をしています。ドメインは通常、”https://”や”https://www.”の後から”/”まで続いているものを指します。例えば、https://magiclpo.jp/statisticsを分析したいときは”magiclpo.jp”がドメインに該当します。
  1. Google アナリティクス4 連携のプロパティIDを入力します。
Google アナリティクス4 連携のプロパティIDとは？
Google アナリティクス4 連携プロパティIDは、Google アナリティクス4の画面から確認することができます。
  1. Google アナリティクス4にアクセスし、ロゴの横のプルダウンをクリックします。
  1. すると、以下のような画面が出てきます。この画像だと「My GA4 Property」がプロパティ名で、その下に表示されている数字がプロパティIDです。(UAから始まるものはGoogle アナリティクス4の旧バージョンであるユニバーサルアナリティクスのプロパティIDです。MAGIC LPOでは使用できません。Google アナリティクス4へ移行後、プロパティIDを取得してください。)
画像引用: [UA→GA4] ユニバーサル アナリティクスと Google アナリティクス 4（GA4）のどちらを使用しているかを確認する方法
💡
プロパティIDはひとつのプロジェクトでしか利用することができません。プロパティIDを複数のプロジェクトで使用しようとすると、エラーが出ます。
  1. MAGIC LPOで「次へ」のボタンをクリックします。
  1. 「タグをコピー」をクリックしてください。分析をしたいページのHeaderにコピーしたタグを埋め込んでください。
  1. ❗ABテストの際に生じるチラつき現象と対処方法 に沿って、アンチフリッカーもHeaderに埋め込んでください
※上記の方法を推奨しておりますが、Headへタグの埋め込みが不可の場合は、こちらのGTMを使用したMAGIC LPOタグの設定方法をご覧ください。
  1. MAGIC LPOに戻り、「ペーストしたら次へ」ボタンをクリックします。
 
  1. タグを設置したページのURLをペーストして「接続テスト」をクリックします。
タグを設置したページのURLとは
手順3で入力したときのURLと同一のURLです。ただし、今回はドメインのみではなく、URLのすべてを記入してください。
以下の画面が出たらGoogle アナリティクス4の連携完了です。
💡
接続失敗をした時は、以下の原因が考えられます。 ・”分析するサイトのドメイン”に誤字がある ・8番の段階で、URLをMagicLPOの基本タグが設置していない親のドメインを指定している可能性がある。（例えば、https://magiclpo.jp/sample/　にMagicLPO基本タグを設置している場合、8番でhttps://magiclpo.jp/をURL記入欄に記入した場合は、https://magiclpo.jp/に基本タグがあるかチェックするため失敗します。https://magiclpo.jp/sample/と記入するようにしてください。） ・Google アナリティクス4 連携のプロパティIDが間違えている (Google アナリティクス4のプロパティIDが”UA”から始まることはありません。プロパティIDが”UA”から始まっている場合は、Google アナリティクス旧バージョンの”ユニバーサルアナリティクス”を使用しています。ユニバーサルアナリティクスからGoogle アナリティクス4に移行する必要があります。) ・Google タグマネジャーでタグを新規作成したバージョンのステータスが”ライブ”かつ”最新”になっていない ・”タグを設置したページのURL”に誤字がある ・すでにすでに使用している方Google アナリティクス4のプロパティIDを使用しようとしている

分析したいページが多い場合(4ページ以上)：GTMを使用したGoogle アナリティクス4 (GA4)の連携手順

  1. 左のメニューから「プロジェクト設定画面」へ移動します。
  1. 「分析を開始するための設定をする」をクリックします。
  1. 「分析するサイトのドメイン」で分析をしたいサイトのドメインURLを入力します。
サイトのドメインとは？
サイトのドメインとは、インターネット上でサイトがどこにあるかを示す住所の様な役割をしています。ドメインは通常、”https://”や”https://www.”の後から”/”まで続いているものを指します。例えば、https://magiclpo.jp/statisticsを分析したいときは”magiclpo.jp”がドメインに該当します。
  1. Google アナリティクス4 連携のプロパティIDを入力します。
Google アナリティクス4 連携のプロパティIDとは？
Google アナリティクス4 連携プロパティIDは、Google アナリティクス4の画面から確認することができます。
  1. Google アナリティクス4にアクセスし、ロゴの横のプルダウンをクリックします。
  1. すると、以下のような画面が出てきます。この画像だと「My GA4 Property」がプロパティ名で、その下に表示されている数字がプロパティIDです。(UAから始まるものはGoogle アナリティクス4の旧バージョンであるユニバーサルアナリティクスのプロパティIDです。MAGIC LPOでは使用できません。Google アナリティクス4へ移行後、プロパティIDを取得してください。)
画像引用: [UA→GA4] ユニバーサル アナリティクスと Google アナリティクス 4（GA4）のどちらを使用しているかを確認する方法
💡
プロパティIDはひとつのプロジェクトでしか利用することができません。プロパティIDを複数のプロジェクトで使用しようとすると、エラーが出ます。
  1. MAGIC LPOで「次へ」のボタンをクリックします。
  1. Google タグマネジャーへアクセスし、「新しいタグを追加」をクリックします。
 
  1. 以下の画面が表示されるので、「タグの設定」をクリックします。
 
  1. 「タグタイプを選択」という画面が出てくるので、「カスタムHTML」を選択します。
 
  1. 「HTML」にMAGIC LPOで表示されたタグをペーストします。
 
  1. 「トリガー」をクリックして、「All Pages」を選択、追加します。
 
  1. 最後にタグ名を命名した後、「保存」ボタンをクリックして保存を完了します。
 
  1. 「ワークスペースの変更」に先ほど作成したタグが表示されていることを確認したら、「公開」ボタンをクリックします。
 
  1. バージョン名をつけます。(命名の仕方は自由ですが、変更点がわかる名前や、変更日がわかる名前をつけると良いです。)バージョン名をつけたら、「公開」ボタンを押してください。
 
  1. 「公開」ボタンを押すと、「バージョン」が見れるようになります。先ほど作成したバージョンのステータスが”ライブ”かつ”最新”になっていることを確認してください。
最新や公開になってない場合は、「︙」をクリックして「最新バージョンに更新」または「公開」を押します。
  1. 次に、A/Bテストを行いたいすべてのページのheaderにアンチフリッカータグを設定します。
アンチフリッカータグとは？
 
  1. タグを設置したページのURLをペーストして「接続テスト」をクリックします。
タグを設置したページのURLとは
手順3で入力したときのURLと同一のURLです。ただし、今回はドメインのみではなく、URLのすべてを記入してください。
以下の画面が出たらGoogle アナリティクス4の連携完了です。
💡
接続失敗をした時は、以下の原因が考えられます。 ・”分析するサイトのドメイン”に誤字がある ・Google アナリティクス4 連携のプロパティIDが間違えている (Google アナリティクス4のプロパティIDが”UA”から始まることはありません。プロパティIDが”UA”から始まっている場合は、Google アナリティクス旧バージョンの”ユニバーサルアナリティクス”を使用しています。ユニバーサルアナリティクスからGoogle アナリティクス4に移行する必要があります。) ・Google タグマネジャーでタグを新規作成したバージョンのステータスが”ライブ”かつ”最新”になっていない ・”タグを設置したページのURL”に誤字がある ・すでにすでに使用している方Google アナリティクス4のプロパティIDを使用しようとしている