Tag: Adobe Target

はじめに Adobe TargetのABテストで、QA URLで動作確認を行う場合に、エクスペリエンスを切り替えたい時に、それぞれQA URLをコピーしてアドレスバーに入れ直すのですが、実際はURLパラメーターの「at_preview_index=」の値が異なるだけなので、そこだけ書き換えれば簡単にエクスペリエンスの切り替えができます。そこで、ブックマークにjavascriptを登録してエクスペリエンスを変更する手順を紹介します。 スクリプトについて TargetのQA URLのURLパラメーターを書き換えます。location.searchに「at_preview_index=X_[Y以外の値]」（Yは目的のエクスペリエンス番号）が含まれているか確認しています。 if (/at_preview_index=d+_[^1]/.test(location.search)) { location.search = location.search.replace(/(at_preview_index=d+_)d+/, ‘$11’) } ブックマークへ登録 ブックマークへは改行・スペースを削除して以下を登録します。 javascript:if(/at_preview_index=d+_[^1]/.test(location.search)){ location.search=location.search.replace(/(at_preview_index=d+_)d+/, ‘$11’)} 「ブックマーク」＞「ブックマーク マネージャー」＞（3点リーダー）「新しいブックマークを追加」 同様にExperience B 、Experience Cも登録します。 Experience B javascript:if(/at_preview_index=d+_[^2]/.test(location.search)) {location.search=location.search.replace(/(at_preview_index=d+_)d+/, ‘$12’)} Experience C javascript:if(/at_preview_index=d+_[^3]/.test(location.search)) {location.search=location.search.replace(/(at_preview_index=d+_)d+/, ‘$13’)} QA URLを表示 アクティビティのアクティビティQAからQA URLのExperience Aを呼び出します。 ブックマークの呼び出し Experience Bの確認を行いたい場合は、登録したブックマークを呼び出します。エクスペリエンスがExperience Bに切り替わります。 おまけ 同様に、「他のすべてのアクティビティに対してデフォルトコンテンツを表示」についてもURLパラメーターの「at_preview_listed_activities_only=」の値が異なるだけなので、おまけとして、「他のすべてのアクティビティに対してデフォルトコンテンツを表示」を切り替えられるブックマーク用スクリプトを紹介しておきます。 ・他のすべてのアクティビティに対してデフォルトコンテンツを表示オン javascript:if(location.search.includes(‘at_preview_listed_activities_only=false’)) {location.search=location.search.replace(‘at_preview_listed_activities_only=false’, ‘at_preview_listed_activities_only=true’)} ・他のすべてのアクティビティに対してデフォルトコンテンツを表示オフ javascript:if(location.search.includes(‘at_preview_listed_activities_only=true’)) {location.search=location.search.replace(‘at_preview_listed_activities_only=true’,…

はじめに Adobe TargetのAdministrationメニューにはEnvironmentsという項目があります。あまり見慣れないものですので紹介したいと思います。 Environmentsとは 平たく言うとAdobe Targetを利用している(mboxコールを投げている)環境の定義・設定となります。 ウェブだとホスト毎に割り当てます。アプリだとホストはないため、Adobe Experience Platform Data Collectionのモバイルプロパティ設定やアプリの実装でEnvironment IDを指定します。 デフォルトのEnvironments デフォルトではDevelopment、Staging、Productionの３種類があります。 Production：編集不可 StagingまたはDevelopment：名称やアクティビティモードを編集することができます。  アクティビティモードは以下の２種類が選択可能です。 Active Activities：アクティブなアクティビティ設定のみを配信する Active and Inactive Activities：アクティブおよび非アクティブなアクティビティ設定を配信する  なお、上の３つ以外にもEnvironmentsを追加すること自体は可能です。 Environmentsの主な使い分け 主な使い分けとして以下の２点があります。  ① Adobe Target Recommendationsの環境  Adobe Target RecommendationsではDevelopment、Staging 、Productionでカタログを使い分けることができます。これにより、例えば本番環境用レコメンデーションデータに検証用環境のそれが混ざらないようにする、といった使い分けが可能となります。  ② アクティビティモードの使い分け  前出のアクティビティモードを「Active and Inactive Activities」とする検証環境を運用する、といった場合に用いられます。もっとも、その場合は意図しない非アクティブ状態のアクティビティも動作するため紛らわしいとみなされることが多く、最近はあまり利用されません。※例えば、意図しない非アクティブ状態のアクティビティが検証環境で動作し画面崩れが生じた、といった問題や事例があります。 各HostsのEnvironmentsを確認する こちらはAdministrationメニューのHostsを利用します。WebページにてAdobe Targetのmboxコールが送信された際に、未登録だと自動的にリストに登録されます。その際に割り振られるEnvironmentはEnvironments画面で「★ Defaunt」マークがあるものとなります。（通常はProduction） Hosts画面に登録された後は編集アイコンクリックで別Environmentに切り替えることができます。  参考HELP https://experienceleague.adobe.com/ja/docs/target/using/administer/environments https://experienceleague.adobe.com/ja/docs/target/using/administer/hosts Implement DigitalではAdobe Launchの導入、運用を支援するサービスを提供しています。ご興味がありましたらお問い合わせください。

はじめに Adobe Targetのページにアクセスする際に、Chromeのアドレスバーで「target」と入力すると以前表示していたアクティビティのURLに移動するのですが、どういうわけか「このアクティビティの詳細を表示できません」となってしまいます。さらにページのメニューの箇所もグレーアウトしてアクティビティ一覧などに移動できません。そこで、ブックマークにjavascriptを登録してアクティビティ一覧へ移動する手順を紹介します。 現象について アドレスバーに「target」と入力すると以前表示していたアクティビティのURLに移動した際にこのような表示になります。 スクリプトについて Targetの各ページはURLのhashで管理されているので、location.hashの値を書き換えます。一応、location.hashに「/target/」が含まれているか確認しています。javasciptコンソールでは、location.hashに値を代入するだけで大丈夫なのですが、ブックマーク上ではページのリロードが必要になります。 if (location.hash.includes(‘/target/’)) { location.hash = location.hash.replace(/target(.*)$/, ‘target/activities/activityLibrary’); location.reload() } ブックマークへ登録 ブックマークへは改行・スペースを削除して以下を登録します。 javascript:if(location.hash.includes(‘/target/’)){location.hash=location.hash.replace(/target(.*)$/, ‘target/activities/activityLibrary’);location.reload()} 「ブックマーク」＞「ブックマーク マネージャー」＞（3点リーダー）「新しいブックマークを追加」 ブックマークの呼び出し 「このアクティビティの詳細を表示できません」ページから、登録したブックマークを呼び出します。アクティビティ一覧のページへ移動します。 おまけ 上記のブックマークは、「このアクティビティの詳細を表示できません」ページ以外からも利用できます。おまけとして、オーディエンスライブラリとプロファイルスクリプトへ移動できるブックマーク用スクリプトを紹介しておきます。・オーディエンスライブラリ javascript:if(location.hash.includes(‘/target/’)){location.hash=location.hash.replace(/target(.*)$/, ‘target/audiences/audienceLibrary’);location.reload()} ・プロファイルスクリプト javascript:if(location.hash.includes(‘/target/’)){location.hash=location.hash.replace(/target(.*)$/, ‘target/audiences/profilescripts’);location.reload()} Implement DigitalではAdobe Targetの導入、運用を支援するサービスを提供しています。ご興味がありましたらお問い合わせください。

はじめに Adobe TargetではmboxパラメータやProfile Scriptパラメーターといった動的データをオファーに活用することもできます。 これを押さえておくと、ちょっとしたパターン違いのための対応の際に追加ページを利用するか単一オファーで対応できるかといった検討もできるようになります。 オファーでの書き方 オファー内で以下のように書くと、パラメータの値に置き換えられます。太字の箇所は該当パラメータ名に置き換えてください。 プロファイルスクリプトパラメータ： ${user.<プロファイルスクリプトパラメータ名>} mboxパラメータ： ${mbox.<mboxパラメータ名>} In-mboxプロファイルパラメータ ${profile.<プロファイルパラメータ名>} 備考： Adobe Target Recommendationのデザインの場合には$の前にバックスラッシュ（）を追加してエスケープさせる必要があります。 例 Implement Digitalのカテゴリカラム（https://www.implementdigital.com/category/column）ページにて、Global mboxパラメータ「favoriteColor」値がorangeまたはgreenのときに各行の日時カラーを変更します。 デフォルト： ●Adobe Target設定例（VEC） ●オファー（カスタムコード）例 ●表示例：「favoriteColor」値がorangeのとき ●表示例：「favoriteColor」値がgreenのとき 参考HELP https://experienceleague.adobe.com/ja/docs/target/using/experiences/offers/passing-profile-attributes-to-the-html-offer 終わりに いかがでしょうか？ mboxパラメータやScript Profileパラメータをオファーもオファー設定の活用できると１つオファーのオファーにまとめられるなどのメリットが出てくることもあります。 この内容が今後のオファー作成時の一助となれば幸いです。Implement DigitalではAdobe Analyticsの分析を支援するサービスを提供しています。ご興味がありましたらお問い合わせください。

はじめに Adobe Targetの設定確認でアクティビティQA URLはよく使うかと思います。（余談ですが、アクティビティQA URLでページにアクセス後、施策が動作している状態をアクティビティQAモードと呼びます） ただし、アクティビティQAモードは一定期間中有効となるため、通常URLでのアクセスでもアクティビティQA URLの設定がページに表示されることがままあります。アクティビティQAモードは解除できますので、紛らわしいようでしたら都度解除することをおすすめします。 アクティビティQAモードの解除方法 Adobe Targetのライブラリ「at.js」のバージョンによって対応方法が異なります。もしご利用のバージョンが不明であれば(1) -> (2)の順で確認するとよいでしょう。 (1) at.js 2系の場合 アクティビティQA URLでページにアクセスした後に「at_qa_mode」クッキーが作成されますのでこれを削除すると解除されます。 (2) at.js 1系の場合 「at_qa_mode」クッキーは作成されませんので、アクティビティQA URLのURLパラメータ部分を「at_preview_token=」のみに書き換えて再度アクセスします。 Implement DigitalトップURLを例とすると以下のようなURLとなります。https://www.implementdigital.com/?at_preview_token= (3) Web SDKの場合 バージョン 2.19.2で確認したところでは(1)同様に「at_qa_mode」クッキーが作成されましたため、(1)同様にこのクッキーを削除します。 まとめ 今回はAdobe TargetのアクティビティQAモードの解除方法について紹介しました。 Implement DigitalではAdobe Targetの導入・実装・運用を支援するサービスを提供しています。ご興味がありましたらお問い合わせください。

はじめに 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からアクティビティを特定する方法を紹介します。 ※アクティビティ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の実装で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で、非同期で取得される会員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のアクティビティーの検証のために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の導入・実装・運用を支援するサービスを提供しています。 ご興味がありましたらお問い合わせください。