Adobe Experience Cloud

Adobe Target: at.jsの「チラつき」を手っ取り早く回避する

こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。

Adobe Targetのat.jsをDynamic Tag Manager(DTM)を使って導入すると、ページを開いた時に一瞬画面が真っ白になる「チラつき」が発生する事があります。
これをDTM設定で回避する小技を紹介します。

Adobeの公式ドキュメントにはat.jsの仕様について記述があります。
How at.js Manages Flicker | Adobe Experience Cloud Help

If you enable the Auto Create Global Mbox setting when configuring at.js, at.js will set HTML BODY style opacity to 0. After a response from Target is received, at.js resets HTML BODY opacity to 1.

at.jsをロードした時にbodyのopacityを0にして画面を一瞬真っ白にして、その後at.jsのコンテンツレンダリングが終わったタイミングでopacityを1に戻す。と書いてます。

これがお節介で、爆速ページならDTMがat.jsをロード始める前にすでにページのレンダリングが始まっており、at.jsがあとから非同期でやって来て画面を一瞬真っ白にするんですね。
それで、at.jsの仕事が終わったら再び画面を表示するのです。
なんという事でしょう。

というわけで、at.jsがopacityを0にするのを回避する方法です。

1. DTMのAdobe Target設定を開き、[ライブラリ管理] > [エディタを開く]

2. at.jsコード内の opacity:0 という文字列を検索する。

3. 該当箇所を opacity:1 に置換する。

4. 設定を保存してステージングモードで動作確認後、画面が一瞬真っ白になるチラつきが起きなければ、本番発行。

以上です。

本日はDTMでat.jsを配信した際に画面が一瞬真っ白になってチラつく問題が回避する小技についてでした。

弊社ではAdobe TargetなどのABテストツールの導入支援も行っております。
お問い合わせはこちらからどうぞ

ブログへの記事リクエストはこちらまで

Tableau:分かりやすいLOD-FIXED編前のページ

BigQuery: Google Analytics 360のネストされたデータをフラット変換するSQL次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Adobe Analytics

    Adobe Analytics: DWHレポートの日付列をBigQueryのDate型として扱う

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  2. Adobe Experience Cloud

    Adobe Summit 2020レポート: Experience Cloud Strategy

    こんにちは。インターン生の中野です。本記事では、バーチャル開催とな…

  3. Adobe Analytics

    Adobe Analytics:計算指標でevents変数を後付けでパーティシペーションにする

    こんにちは。CEOの原田です。なるべくこのブログでは新しめな内容を…

  4. Adobe Experience Cloud

    Adobe Summit 2020レポート: Unravel Customer Insights U…

    こんにちは、エクスチュアの権泳東/コン・ヨンドン(@exturekwo…

  5. Adobe Analytics

    Adobe Analytics:Report Builderの小技:リクエストのあるシートを丸ごとコ…

    エクセルでの定期レポートを作る際に、一度データブロックを作っておけば以…

  6. Adobe Analytics

    Adobe Summit 2020レポート: Implementation Tips for Ado…

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Twitt…

カテゴリ
最近の記事
  1. AWS発のAIエージェントIDE「Kiro」を使用した仕様駆…
  2. TableauとSnowflakeを接続する方法
  3. 【dbts25】Snowflake×PostgreSQLのニ…
  4. TROCCO dbt連携編
  5. KARTEの「フレックスエディタ(β)」登場!ノーコードでこ…
  1. Adobe Analytics

    Azure DatabricksでAdobe AnalyticsのDatafee…
  2. Databricks

    ScalaでDatabricksのDataFrameを扱う
  3. Snowflake

    Snowflake Summit 2025 参加レポート【Day4】
  4. IT用語集

    インポート(Import)とエクスポート(Export)って何?
  5. Adobe Analytics

    Adobe Analytics 指標について
PAGE TOP