React / Next.jsでのGoogle最適化に関する一般的な問題 -- reactjs フィールド と next.js フィールド と google-tag-manager フィールド と google-optimize フィールド 関連 問題

General problems with Google Optimize in React / Next.js












8
vote

問題

日本語

タイトルは少し曖昧に見えるかもしれませんが、私は現在、私たちのReact / Next.jsプロジェクトでGoogle Optimizeを統合する複数の問題を発生しているからです。私はできるだけ詳しく説明するように私の問題と行動を説明しようとします。しかし、何かが不明なかどうか私に知らせてください。

問題点:

  1. Google Optimizeがヘッドの上部に追加されていますが、常にページフラッシュを経験します。意味ユーザは最初に私たちのページを見てから、何もない(非同読機能をキックインします)、次にページを変更しても。
  2. ナビゲーションリンクを受注し、1つのナビゲーションリンクを削除し、CTAテキストを変更する実験を作成しました。テスト目的のためにバリアントを100%に設定しました。何が起こるのか(問題1に関連しています)、最初に私たちのオリジナルのWebページを見てから、その後、1つのナビゲーションリンクが削除されたオリジナルのWebページが表示されます。意味を追加することを意味しますが、いくつかの変更を削除しました。
  3. 動的ページに実験を追加するときは、変更を適用することはできません。実験を実行するときは、何も変更されず、ビジュアルエディタを再度開くと、変更に問題があると表示されます。変更が単純なテキストの変更であっても。
  4. 私が試したもの:

    1. easync-hide "classnameをHTMLでデフォルトで追加します。これはデフォルトでWebページを非表示に設定します。 Google Optimize Synchroniveを使用すると、これは良く機能します。ただし、iSyncに設定した場合は、パフォーマンスが良くないページが表示される前に1~2秒かかります。
    2. Google Tag ManagerでGoogle Optimizeを追加しましたここに。はい、私のASYNC-hide関数のGoogle最適化コンテナIDをGTMコンテナIDに変更しました。
    3. 私は上記の部分2を阻止し、Googleがこのように手動で最適化を追加しました。
    4. <事前> <コード> <Html lang="en" className="async-hide"> <Head> {/* Google Optimize Ant-Flicker Snippet https://support.google.com/optimize/answer/9692472?ref_topic=6197443 */} <style dangerouslySetInnerHTML={{ __html: `.async-hide { opacity: 0 !important}`, }} /> <script dangerouslySetInnerHTML={{ __html: ` (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'OPT-OPTIMIZE_ID':true}); `, }} /> <script src="https://www.googleoptimize.com/optimize.js?id=OPT-OPTIMIZE_ID"></script> {/* Google Tag Manager */} <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-TAGMANAGER_ID"></script> <script dangerouslySetInnerHTML={{ __html: ` (function(w,l){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); })(window,'dataLayer'); `, }} ></script> ... [rest of code]

      質問

      1. 次の問題はNext.jsに関連していますか?単一ページの代わりにReactアプリケーションの静的多数体で動作するという事実は
      2. React / Next.jsプロジェクトでGoogle Optimizeを実装する最良の方法は何ですか:Google Tag ManagerまたはGoogle Optimize
      3. を介して
      4. React / Next.jsプロジェクトでのGoogle最適化の最良のロード方法は何ですか:非同期または同期?
英語

The title might seem a bit vague, but that's because I'm currently experiencing multiple problems integrating Google Optimize in our React / Next.js project. I'm going to try to explain my problems and actions as detailed as possible. However, let me know if something's unclear.

The problems:

  1. Although Google Optimize is added at the top of the head, we always experience a page flash. Meaning users first see our page, then nothing (async hide function kicks in), then the page again with changes.
  2. I've created an experiment that re-orders navigation links, removes one navigation link, and changes our CTA text. I've set the variant to 100% for testing purpose. What happens (related to problem 1), is that we first see our original webpage, then the changes, then again our original webpage with one navigation link removed. Meaning it added the variant, but removed some changes.
  3. When adding an experiment on a dynamic page, the changes cannot be applied. When I run the experiment, nothing changes, and when I re-open the visual editor, it says there are issues with the changes. Even if the change is just a simple text change.

What I've tried:

  1. Adding the "async-hide" className by default on html. This sets the webpage by default hidden. If I use Google Optimize synchronous, this works good. If I set it to async, however, it takes 1 to 2 seconds before it shows the page, which isn't good performance.
  2. I added Google Optimize in Google Tag Manager by following the exact steps mentioned by Google here. Yes, I did change the Google Optimize container ID in my async-hide function to GTM container ID.
  3. I undid part 2 above and added Google Optimize manually like this.
<Html lang="en" className="async-hide"> <Head>   {/*      Google Optimize Ant-Flicker Snippet     https://support.google.com/optimize/answer/9692472?ref_topic=6197443   */}   <style     dangerouslySetInnerHTML={{       __html: `.async-hide { opacity: 0 !important}`,     }}   />   <script     dangerouslySetInnerHTML={{       __html: `       (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;       h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};       (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;       })(window,document.documentElement,'async-hide','dataLayer',4000,       {'OPT-OPTIMIZE_ID':true});     `,     }}   />   <script src="https://www.googleoptimize.com/optimize.js?id=OPT-OPTIMIZE_ID"></script>    {/* Google Tag Manager */}   <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-TAGMANAGER_ID"></script>   <script     dangerouslySetInnerHTML={{       __html: `         (function(w,l){w[l]=w[l]||[];w[l].push({'gtm.start':         new Date().getTime(),event:'gtm.js'});         })(window,'dataLayer');       `,     }}   ></script> ... [rest of code] 

Questions I'm having

  1. Is this problem related to Next.js? The fact that we work with static multipages in a react application instead of single page
  2. What is the best method to implement Google Optimize in a React / Next.js project: via Google Tag Manager or Google Optimize
  3. What is the best loading method for Google Optimize in a React / Next.js project: async or sync?
</div
           
         
         

回答リスト

4
 
vote
vote
ベストアンサー
 

ここで経験しているかなり一般的な問題です。 Google Optimizeおよび他のA / Bクライアント上のJavaScriptを介してWebサイトのコンテンツを変更するソリューションは、スクリプトを変更する前にダウンロードする必要があるため、フリッカ効果を作成します。

あなたの質問に答えるために:

  1. next.jsで働いているように、いくつかの特別な問題が発生します。 next.jsは、クライアント側の水和フェーズと同様にサーバー上のサーバー(または静的レンダリングフェーズ)を使用します。水準化が開始される前にGoogleが最適化(そしてそれをロード)を配置すると、正しい実験がレンダリングされますが、水和がキックインするとすぐに上書きされます。

  2. TagMangerでどのように統合することができます:最外部のコンポーネント、e.x。 <App/> useEffect() フックは、TagManagerイベントをスローして最適化の経験の挿入を引き起こす可能性があります。

    !注意してください!これを通してあなたはちらつき効果を得るか遅くなるでしょう あなたがすべて水分化されるまで待たなければならないようにあなたのサイトを下にしてください これは遅いデバイスで数秒かかることがあり、その後Rerender あなたのコンテンツ。

    これはJamStackページに関する一般的な問題です - これは解決できます 実験APIを直接コード内に直接統合する より複雑な。

  3. SYNCロードは、JSとコンテンツがロードされるまでレンダリングをブロックすると、サイトが表示されるため、サイトが表示され、ASYNCのロードはサイトがちらつきます。タグベースのA / Bテストを使用して作業するときの2つのオプションです - あなたはより少ない悪を選ばなければなりません。

 

It's a quite common problem you're experiencing here. Google Optimize and other A/B testing solutions that change website content through Javascript on the client create a flicker effect, as the scripts have to be downloaded before it can change anything.

To answer your questions:

  1. As you're working with next.js some special problems arise. Next.js uses a server (or static render phase) on the server as well as a hydration phase at the client side. When you place Google Optimize (and it loads) before the hydration started it will render the correct experiment but will get overwritten as soon as the hydration kicks in.

  2. How could you integrate it properly with Tagmanger: In the most outer component, e.x. <App/> you could use a useEffect() hook which throws a tagmanager event to trigger the insertion of the optimize experiement.

    !Please be aware! through this you will get a flicker effect or slow down your site as you have to wait until everything is hydrated which can take some seconds on slow devices and then will rerender your content.

    This is a common problem with Jamstack Pages - which can be solved through integration the experimentation api directly in the code which for sure is more complex.

  3. Sync loading will slow down you're site as it blocks the rendering until the JS and content is loaded, async loading will make the site flicker. That's the two options when working with tag based A/B testing - you have to choose the lesser evil.

</div
 
 

関連する質問

0  Google OptimizeでA / Bテストをリダイレクトします  ( Redirect a b test on google optimize ) 
Google Optimizeの製品ページのリダイレクトテストを実行しています。これには2つの亜種があります。例えば: オリジナルのURL: www.abc。 COM /ビデオゲーム/プレイステーション/ゲーム/製品/製品名 - 1 / 11233.htm...

0  React TrannalySetInnerHtmlは&characterを使ってJSON Configを破る  ( React dangerouslysetinnerhtml breaks json config with character ) 
Amp-AnalyticsスクリプトをNext.jsから生成されたAMPページに入れようとしていますが、and ampのためJSON Configを破る文字。 これはコードです: <事前> <コード> <amp-analytics id='analytics...

1  Google Optimizeなしで実験者を埋めると実験的なものです  ( Fill experimentid and experimentvariant without google optimize ) 
私達は私達の実装を通して実行されているサーバー側の実験を持っています。 彼らのサーバー側の実験を通して実験を追跡するためにGoogleが最適化しました - 解決策は私たちにとってオフであるようです(それほど標準設定ではありません)。これで、問題が私たちの最適...

1  Google Optimize Editorにアクセスしたエラーが発生しました  ( Getting an error accessing google optimize editor ) 
Google Optimize Editorにアクセスしようとしていますが、次のエラーが発生しています。 <事前> <コード> user = User.objects.get(username=request.POST['username'])0 「Xフレ...

1  Google Optimize Ampページへのインストール:認証されていません  ( Google optimize installation on amp page not verified ) 
アンプページのAMP実験を実装し、Google Optimizeと接続しようとしています。この記事の指示に従ってください - 最適化を備えたAMP実験を測定する。しかし、AMP-Page内のGoogle Optimizeスクリプトを統合する方法とは何もありま...

0  AMP Analyticsコードが出力されていない、GoogleがAMP-実験を最適化  ( Amp analytics code not being output google optimize amp experiment ) 
Google Optimize実験を私のWebサイトで設定したいが、 <amp-analytics> タグはコード&アンプを出力していません。機能していません。 だから何が起こっているのはこのコードを持っていることです。 <事前> <コード> <amp-an...

8  React / Next.jsでのGoogle最適化に関する一般的な問題  ( General problems with google optimize in react next js ) 
タイトルは少し曖昧に見えるかもしれませんが、私は現在、私たちのReact / Next.jsプロジェクトでGoogle Optimizeを統合する複数の問題を発生しているからです。私はできるだけ詳しく説明するように私の問題と行動を説明しようとします。しかし、何...

2  gtag.js optmize server_sideの実装が働いていません  ( Gtag js optmize server side implementation not working ) 
gtag.js(Googleからの新しいグローバルタグ)で最適化するサーバー側の実装が必要です。 Analytics.jsでは ga('set', 'exp', 'experimentid.0'); と同じくらい簡単でした。この:<コード> gtag('...

0  Google OptimizeとAMP統合  ( Google optimize and amp integration ) 
私は私のAMP(WordPress)のWebサイトで最適化を伴うA / Bテストを実行しようとしています。 私は公式のWordPress Ampプラグインを使用して、プラグインから提供されたフックを介して分析設定を追加しています。最後のHTML出力をお見せしま...

11  Google OptimizeでJavaScriptを作成するにはどうすればよいですか。  ( How do i run javascript on document ready in google optimize ) 
Google Optimize Campaignでウィンドウのロードやドキュメントの準備ができているJavaScriptを実行する方法それは私がMOD要素を体に全体に選択することを可能にするようですが、私はドキュメントの準備ができてJSを実行する必要がありま...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有