Googleの最適化と次の多変量テスト(MVT).分析のためのJS

7748 ワード
mvt ux optimize nextjs テキストリンク
サーバー側のUXテストでは、クライアント側のテストで最適化するすべてのタスクを実行する必要があります.たとえば、コードは、視聴者を対象とし、一貫して各ユーザーの適切なバリアントを提供します.最適化インターフェイスを使用して実験を作成し、目標を設定し、変数を作成し、レポートを表示します.
サーバーの最適化here
このガイドでは、次のようにあなたのサーバー側のアプリケーションでは、Googleの最適化MVT(多変量テスト)を実装する方法を学びます.あなたのデータをGoogle Analytics 4に送信します.

事前要件

  • グーグルAnalytics 4
  • タグマネージャ
  • グーグル最適化
  • あなたの次.jsアプリ

    • Googleタグマネージャを追加します。jsアプリ


    端末を開き、新しい次を作成します.NPXとのJSアプリ.
    npx create-next-app
    あなたがすでに次を持っているならば.JSアプリは、新しいファイルを作成することができます_document.js GTMスクリプトを<Head> and <body> コンポーネント.
    カスタムドキュメントについての詳細はhere .
    // _document.js

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  const GTMID = "GTM-XXXX" // I recommend using .env for this variable.

  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `(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','${GTMID}');`,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTMID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
        }}
      />
      </body>
    </Html>
  );
}

    あなたのGoogleオプティマイズアカウントをGTMとGA 4に接続してください


    Googleの最適化に移動し、コンテナの設定をクリックします.リンクの測定セクションからGA 4のプロパティ.
    その後、最適化コンテナIDをコピーします.

    次に、Googleタグマネージャアカウントに移動します.新しいタグを作成し、Googleの最適化を選択します.ちょうどあなたの最適化コンテナIDを貼り付けます.

    新しいMVTの作成


    Googleの最適化アカウントに移動し、新しい経験を作成する

    エディタページを追加


    あなたのローカルマシンで作業している場合は、単に書くことができますlocalhost:3000/ またはホスト名とポート名.
    GoogleのページエディタのURLを最適化トレイルスラッシュ敏感ですので、スラッシュを追加することをお勧めします.
    と多変量テストとしての経験の種類を選択します.

    オーディエンス


    URLクエリパラメータ、クッキー、jsなどの特定の変数を使用してオーディエンスをターゲットにすることができます.
    このワークショップではurlパラメータを使用します.新しいクエリキーを追加しますmvt .

    そして、あなたはtrueのように質問するパラメタを与えなければなりません.また、あなたのルールをチェックすることを忘れないでください.

    実験の展開


    展開する前に、変更されたセクションをチェックします.エディタページであるあなたのセクションを編集するには、chromeとGoogleの最適化拡張を使用しなければなりません.

    また、A 1からB 1、A 1、B 1のように、トップセクションの多変量組み合わせの詳細を確認してください.
    そして、あなたの実験で分離された変種を望まないならば、そのために個人化を作成してください.個人化に関する詳細here.

    ライブテスト


    あなたのNextJSアプリを起動
    yarn dev
    移動するhttp://localhost:3000/?mvt=trueあなたの実験が成功した場合、あなたのランディングページにあるA 1からB 0の変種を見るべきです.

    いくつかのセッション変更後、バリアントA 1からB 1に移動します.

    読書ありがとう.👋 私を購読するのを忘れないでくださいMedium or
    からリソースをチェックhere
    [プログラマー]次の大きな数字