GA4接続したGoogle Optimizeは従来型スニペットが使えない

Google Optimizeは2023年9月30日をもってサービス終了となりました。

ほとんどの方には関係のない話ですが、GoogleAnalytics4に接続したGoogleOptimizeではanalytics.jsをOptimizeタグとして認識しません。

その昔、GoogleOptimizeがリリースされた頃はoptimize.jsおよび同期タグが存在せずanalytics.jsをスニペットとして非同期的に利用していました。
具体的には以下のような形でrequireで呼び出します。

<style>.async-hide { opacity: 0 !important} </style>
<script>(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_CONTAINER_ID':true});</script>
        
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
</script>

私の場合はHTMLに直書きしたanalytics.js（Optimize用途）とは別にGTMからもanalytics.jsを吐き出していたので、その状態でUAに接続したOptimizeコンテナでは以下のWarningが出ていました。

あくまでWarningだったので利用できる状態だったのですが、 GA4に接続したOptimizeコンテナではError扱い になってしまい、Optimizeエディタが操作できません。

というわけで、GA4利用においてはoptimize.jsへの切り替えが必須となります。

同期タグ

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

非同期タグ

<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>

非同期タグにアンチフリッカーを追加する場合

<style>.async-hide { opacity: 0 !important} </style>
<script>(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,
{'CONTAINER_ID':true});</script>

optimize.jsに切り替えると無事エラーが解消されます。

自社サイトやクライアントのサイトでanalytics.jsをOptimizeタグとして利用している場合には注意が必要ですね。