Adobe TargetでMobile Viewportを利用する

はじめに Adobe Targetで施策を実施する際にはPCとSPで画面確認が必要なことは多々あるかと思います。 特にレスポンシブデザインのサイト向けであれば、Mobile Viewportが確認の一助になるかと思いますので紹介したいと思います。 Mobile Viewportとは Adobe TargetのMobile Viewportは、平たく言うと、Visual Experience Composer(以下、VECと呼称します)にて様々な画面サイズで画面表示を試すことができる機能です。 HELP: https://experienceleague.adobe.com/ja/docs/target/using/experiences/vec/mobile-viewports ※いくつかのデバイスのビューポートサイズも掲載されています   初期状態ではDesktopしかありませんがこれのパターンを増やすことができます。よって、サイトのガイドラインなどで指定された幅・高さをVEC上で擬似的に再現することで、一次確認などに活用ができます。 例えば、下図はiPhone 14の幅・高さのMobile Viewportを追加した例となります。(画面上部のComposeタブ近くにiPhone 14と表示されています) モバイルビューポートの追加 あらかじめ画面幅や高さ、OSを調べておきます。 その上で、管理者メニューのVisual experience composerメニューを開き、Mobile viewport configurationブロックのAddボタンをクリックします。 登録フォームがモーダル表示されます。 名前、幅、高さ、OSを選択してSaveボタンをクリックします。 Mobile viewport configurationブロックに保存した設定が追加されます。 Mobile Viewportの使い方 VECのギアアイコンをクリックしAdd Mobile Viewportsをクリックします。 ヘッダーメニュー下にモバイルアイコンが表示されるためクリックします。 Viewportsパネルが表示されるので追加するViewportをクリックしてONにします。 VECの画面UI部分がONにしたViewport設定の画面幅や高さにUIが変更されます モバイルアイコン右横をクリックすると横向きの表示も確認できます。 ビューポートは複数ONにできます。 以下はiPhone 12 Pro Maxの画面幅・高さのMobile Viewport設定もONした表示例となります。 帯のViewport名(上図だとiPhone 12やDesktop)をクリックするとそのViewport設定の幅・高さに表示が切り替わります。 以下は上図でDesktopをクリックした後の表示となります。 まとめ いかがでしょうか? Mobile Viewportを設定しておくとVEC設定時にちょっとした表示確認が便利になるかと思います。…

Adobe Target のアクティビティIDからアクティビティを特定する

はじめに Adobe Target のアクティビティを確認したい場合に、アクティビティIDからアクティビティを特定する方法を紹介します。 ※アクティビティIDとはアクティビティの詳細情報に表示されている数字を指します。 手順 アクティビティ一覧を表示します。 ブラウザーの開発者ツールを開きます。 ページの再読み込みを行います。 ネットワークパネルで、「activities.at.json」でフィルタリングを行います。 activities.at.jsonのレスポンスを整形表示にします。 対象のアクティビティIDで検索します。 アクティビティの件数が多くて現在のページに全て表示されていない場合は、アクティビティ一覧を下までスクロールさせてさらにactivities.at.jsonを読み込ませて同様に検索を行います。(アクティビティが大量にある場合は、すべてのアクティビティのリストを表示させて後でレスポンスの検索からIDを検索する方法が有効です) activities.at.jsonのitems > sync > root > targetIdがアクティビティIDにあたります(①)。少し上にある「jcr:title」がアクティビティ名称(②)になりますので、対象のアクティビティが特定できます。 まとめ 今回は個別のTarget実装というよりは、トラブルシューティング等で複数のアクティビティから特定のアクティビティを見つけるような時に使えるようなTipsになります。 もし何かの時にお役立て頂けましたら幸いです。 Implement DigitalではAdobe Targetの導入・実装・運用を支援するサービスを提供しています。 ご興味がありましたらお問い合わせください。

Adobe Target のadobe.target.trackEvent、adobe.target.getOffer、adobe.target.getOffersについて

はじめに Adobe Target の関数 adobe.target.trackEvent、adobe.target.getOffer、adobe.target.getOffersはAdobe Targetの実装でmboxパラメーターをリクエストする際に使用する関数ですが、その違いについて説明します。 前提条件 at.jsのバージョンは2.xを対象としています。 それぞれの主な機能 adobe.target.trackEvent クリックの追跡やコンバージョンの計測に使用します。レスポンスは受け取りません。 リクエストにはtimestampが含まれており、閲覧している端末の内部時計のずれが大きいと400エラーになり計測がされない場合があります。 内部的には navigator.sendBeacon() が呼ばれています。 adobe.target.getOffer ターゲットのオファーを受け取るためのリクエストを発行します。レスポンスでオファーを受け取り、必要に応じてadobe.target.applyOfferを実行します。 リクエストにはwindow.targetPageParams()やwindow.targetPageParamsAll()が定義されている場合にはそれらで追加されたパラメーターが追加されます。 内部的には window.XMLHttpRequest()が呼ばれています。 adobe.target.getOffers 複数のオファーを同時にリクエストできます。それ以外に、有効なアクティビティの全てのオファーを受け取ることもできます。レスポンスでオファーを受け取り、必要に応じてadobe.target.applyOffersを実行します。 リクエストにはwindow.targetPageParams()やwindow.targetPageParamsAll()が定義されている場合にはそれらで追加されたパラメーターが追加されます。 at.js初期化パラメーターのpageLoadEnabledが有効な場合は自動的にパラメーターexecute -> pageLoadで呼び出されます。 内部的には window.XMLHttpRequest()が呼ばれています。 使用例 adobe.target.trackEvent adobe.target.trackEvent({ “mbox”: “clicked-cta”, “params”: { “param1”: “value1” } }); adobe.target.getOffer adobe.target.getOffer({ “mbox”: “target-global-mbox”, “params”: { “a”: 1, “b”: 2 }, “success”: function(offer) { adobe.target.applyOffer( {…

Adobe Target dataProvidersを使用してページ動的要素からmboxパラメーターを設定する

はじめに Adobe Targetで、非同期で取得される会員IDなどをmboxパラメーターに含めたい場合は、window.targetGlobalSettings.dataProviders を使用すると効率的に設定可能です。 しかし会員情報取得API等とAdobe Targetの連携がされていない場合は、独自で値を取得する仕組みが必要です。 ページ要素に必要な値が設定される場合に、それらから値を取得する方法を説明します。 window.targetGlobalSettings.dataProviders の基礎 window.targetGlobalSettings.dataProviders に配列で設定します。 (https://developer.adobe.com/target/implement/client-side/atjs/atjs-functions/targetglobalsettings/#data-providers より抜粋) KEY TYPE DESCRIPTION name String Provider名 version String Providerバージョン timeout Number Providerのタイムアウト値。オプション provider Function Providerデータ取得ロジック。 引数のcallbackはデータが取得成功または失敗した際に呼び出す。 callbackには2つのパラメーターがある。 1つ目がエラーで、エラー発生時にはエラーを指定し、成功時にはnullを指定します。 2つ目がTargetリクエストに含めたいJSONオブジェクトで指定します。 同期で設定しているシンプルな例 var syncDataProvider = { name: “simpleDataProvider”, version: “1.0.0”, provider: function(callback) { callback(null, {t1: 1}); } }; window.targetGlobalSettings = { dataProviders: [ syncDataProvider…

Adobe Target検証用プロファイルスクリプト/オーディエンスの作成

Adobe Targetのアクティビティーの検証のためにQAモードを使用しますが、QAモードが使用できない、オーディエンス条件を満たす条件が作れないなどの場面に遭遇することもあると思います。 そういった場合に、trackEventを使用してプロファイルスクリプトに値を設定することによって任意の条件のオーディエンスを作成する方法を考えました。 1.プロファイルスクリプトを作成 下記のようにmboxのパラメーターを返すようにします。 if (mbox.name == “debug-activity”) { return mbox.param(“value”); } 2.オーディエンスを作成 先程作成したプロファイルスクリプトを参照し、条件として後でtrackEventで渡すvalue値を指定します。   属性:訪問者プロファイル user.debugActivity 条件:等しい(静的値) test1 3.アクティビティーにオーディエンスを指定 作成したオーディエンスを検証するアクティビティーのターゲットに指定します。   属性:訪問者プロファイル user.debugActivity 条件:等しい(静的値) test1 4.検証する環境で、trackEventを実行 Chrome等のjavascriptコンソールで下記を実行します。 adobe.target.trackEvent({ “mbox”: “debug-activity”, “params”: { “value”: “test1” } }); この後、対象のページにアクセスすれば3で作成したアクティビティーのエクスペリエンスをテストできます。 5.最後に 1で作成したプロファイルスクリプトは使い回しができ、2のオーディエンスで比較する文字列と、4で実行するtrackEventのvalue値を変更することで様々なアクティビティーの検証ができるようになります。 Implement DigitalではAdobe Targetの導入・実装・運用を支援するサービスを提供しています。 ご興味がありましたらお問い合わせください。

Adobe Targetプロファイルスクリプト命令数エラーを回避する

Adobe Target プロファイルスクリプトの無効化 Adobe Targetのプロファイルスクリプトで、それまで動作していたのにいつの間にか非アクティブになってしまっていたことがありました。 調べてみると繰り返し処理のループ回数が当初より多くなっていたことにより、javascript命令数エラーになっていたので、その際に行った対策を紹介します。 プロファイルスクリプトの一覧で確認すると、ステータスにメッセージとして「属性は自動的に無効化されました : Script XXXXX executed more than 2000 instructions」と表示されています。 原因について プロファイルスクリプトにはjavascript命令が2,000という制限があり、それを超えてしまうと自動的に無効化されてしまいます。 繰り返し処理がある場合などは、当初は動作していたのに、日数が経ったり特殊な条件下で制限を超えてしまう場合があります。 対処方法 new演算子はリテラルにする 例: new Object() -> {} new Array() -> [] Array.push()は使用せず、文字列の結合を使用する arr.push(variable) -> arr += variable + ‘,’ 複雑な処理を別スクリプト化する スクリプト内で生成した変数を使用しない複雑な処理は別スクリプトとして記述し、コード内でuser.get(‘scriptName’)で参照します。 別スクリプトでは必要に応じてスクリプトの実行条件やパラメータ参照をメインのスクリプトと同様に記述します。 参考 特定の状況での Target によるプロファイルスクリプトの無効化 https://experienceleague.adobe.com/docs/target/using/audiences/visitor-profiles/profile-parameters.html?lang=ja#section_C0FCB702E60D4576AD1174D39FBBE1A7 ベストプラクティス https://experienceleague.adobe.com/docs/target/using/audiences/visitor-profiles/profile-parameters.html?lang=ja#best Implement DigitalではAdobe Targetの導入・実装・運用を支援するサービスを提供しています。 ご興味がありましたらお問い合わせください。