Tag: Adobe Target

はじめに Adobe Targetの画像オファー（実体はScene7/Dynamic Media）は、100以上の配信コマンドを持つ強力な画像配信エンジンです。前回の記事では、画像オファーの基本的なURL取得方法について解説しました。今回は公式の「画質最適化ベストプラクティス」に基づき、開発者が知っておくべきURLパラメータの正解と、効率的な運用のためのポイントについて解説します 。 1. 「fmt」パラメータの省略とデフォルト挙動について 画像オファーのURLを取得した際、fmt（フォーマット）が付かない場合があります。公式ドキュメントによると、この挙動には明確なルールがあります。 デフォルトはJPG： URLに fmt コマンドが含まれていない場合、Dynamic Mediaはデフォルトで JPG として画像を配信します。 なぜ付かないのか： VEC（視覚的編集エディター）での操作時、明示的な形式変換（例：WebPへの変換など）を指示しなかった場合、パラメータは省略されます。 ⚠️ 透過画像（PNG）に関する注意点元画像が透過PNGであっても、URLに fmt がなく、かつ拡張子が .jpg のパスになっている場合、サーバー側でJPGとしてレンダリングされ、透過部分が白く塗りつぶされることがあります。透過を維持するには、手動で ?fmt=png-alpha を付与するのが確実です。 2. URLパラメータによる動的リサイズと最適化 公式ドキュメントでは、画像のサイズ変更において最も効率的なアプローチが定義されています。 幅か高さ、片方だけ指定する： &wid=<値> または &hei=<値> のいずれか一方を指定するのがベストです。これにより、アスペクト比（縦横比）を維持したまま自動でリサイズされます。 公式推奨の最適化セット： Adobeが「ほとんどの状況で優れた結果になる」と推奨している設定は以下の通りです。カスタムコードでの実装時は、このパラメータをベースにしましょう。?wid=800&fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0 パラメータ 公式の推奨理由 qlt=85,0 画質100はファイルサイズが不必要に増えるため85がベスト。,0 は色度ダウンサンプルを無効化し、エッジをシャープに保ちます。 resMode=sharp2 画像縮小時のボケを抑え、最も高品質なレンダリング結果を得られます。 op_usm アンシャープマスク（シャープネス）。1.75（強さ）, 0.3（半径）, 2（しきい値）がWeb上で最も自然で鮮明になります。 3. 運用を支える命名規則のベストプラクティス カスタムコードで動的にURLを生成する場合、画像名は「変えない」ことが鉄則です。 サイズを名前に含めない： banner_600x400.jpg ではなく banner_main.jpg とします。 理由は「パラメータ制御」：…

はじめに Adobe AnalyticsやAdobe Targetの仕事をやっていると、一時的にウェブコンテンツのHTMLやタグを差し替えて確認や検証で実施してみたいことがあります。例えば、新しいデータレイヤーやページ側のJavascript変数、追加予定のHTMLタグから必要なデータをAdobe AnalyticsやAdobe Targetに送信するような場合で、早めに対応しておきたいケースが考えられます。その際にはCharlesなどのプロキシツールやファイルをリダイレクトさせるアドオンなどを利用することが考えられます。ただし、そのためのソフトやアドオンをインストールしづらかったり、プロキシツールだと設定が難しい・文字化けしたということもあるかと思います。そういったときには、Chromeのローカルオーバーライドも試してみるとよいかと思います。 ローカルオーバーライドを使うには まず、コンテンツをオーバーライドする際には保存フォルダが必要になります。あらかじめ作っておきましょう。それから、ネットワークやソースタブよりオーバーライド対象のファイルを右クリックしてコンテンツをオーバーライドを選択します。オーバーライド用のフォルダをまだ選択していない場合にはオーバーライドファイルの保存フォルダを選択するよう表示されます。フォルダを選択ボタンをクリックして、保存フォルダを選びます。DevToolsにファイルの編集を許可しますか？のダイアログが表示されますので許可します。今回の例では「ChromeOverride設定用」というフォルダを選んでいます。許可するとソースタブ > オーバーライドタブで確認ができます。 ローカルオーバーライドの有効化・無効化 ローカルオーバーライドを有効化をチェックON、OFFで簡単に切り替えられます。ONにすると次回以降のアクセスの際にローカルオーバーライドフォルダのファイルに差し替えられます。また、差し替えファイルの編集はそのままDeveloper Toolの右側の表示枠で対応する他、フォルダにあるファイルをテキストエディタなどでも構いません。ただ、そのままだとずっとオーバーライドが適用されるため、利用を終えたらチェックOFFにして無効にしてください。 終わりに いかがでしょうか。本記事はウェブコンテンツ主体の説明となりますが、HTTPレスポンスヘッダーを書き換えたりもできます。興味があるかは参考欄にchrome for developersページのリンクありますので、ぜひ御覧ください。 参考 https://developer.chrome.com/docs/devtools/overrides?hl=ja

はじめに Adobe Targetでクリエイティブを運用する際、アセットを直接管理できる「画像オファー」機能は非常に便利です。しかし、カスタムコード（VEC外の実装）でこれらの画像を利用しようとすると、URLの取得方法に少し工夫が必要です。本記事では、画像オファーの基本設定から、開発時に役立つURLの抽出手順について解説します。 1. 事前準備：Scene7（Adobe Experience Manager Assets）の設定 画像オファーを利用するには、バックエンドでScene7（現 AEM Assets）との連携設定が完了している必要があります。 確認方法： 管理 > Scene7 設定 メニューから、アカウント設定がされているか確認してください。 画像の登録： オファー > 画像オファー からアップロードします。運用効率を上げるため、キャンペーンごと、あるいはデバイスごとにフォルダを分けて管理することをお勧めします。 2. 基本的な画像差し替え手順 Visual Experience Composer (VEC) 上で既存の画像を差し替える場合は、直感的な操作が可能です。 変更したい画像要素を選択。 メニューから 「画像オファーを変更」 をクリック。 ライブラリから対象の画像を選択して適用します。 3. カスタムコードで利用するためのURL取得テクニック 「背景画像としてCSSで指定したい」「JavaScript内で動的に画像パスを扱いたい」といった場合、画像オファーの直URLが必要になります。しかし、管理画面から直接URLをコピーする機能は提供されていません。 以下の手順で、確実に有効なURLを抽出できます。 ステップ1：一時的にVECで画像を適用する 適当な場所で「画像オファーを変更」を行い、URLを取得したい画像を選択します。 「変更のリスト」に画像変更のアクションが追加されます。 ステップ2：URLの抽出 追加された変更アクションのプロパティ画面を開きます。 ソース（src）属性に記述されているURLをコピーします。 コピーしたURLからサイズに関するパラメーターを削除します。 ステップ3：変更の破棄 URLさえ取得できれば、VEC上での変更設定は不要です。変更のリストから「変更を削除」をクリックして、元の状態に戻しておきましょう。 4. 画像URLの構造と注意点 取得できるURLは、概ね以下のようなフォーマットになっています。https://{任意}.scene7.com/is/image/{アカウント毎のScene7パス}/{ファイル名}?fmt={形式}&hei={高さ}&wid={幅} パラメータ： fmt（フォーマット）は付与されていない場合があります。 hei/wid（サイズ）は、VECで差し替えた画像のサイズになっているため、使用する際は削除します。削除すると画像の実サイズで配信されます。 重要な注意点：画像URLには規則性があるため、ファイル名部分を書き換えれば他の画像も表示できるように思えますが、Adobe Targetの仕様上、一度もエクスペリエンス上で呼び出されていない（アクティベートされていない）画像は、URLを直接叩いても404エラーになるケースがあります。…

はじめに Adobe Targetにおいて、プロパティを分けて運用されていることがあります。この場合には、Adobe Targetのmboxコールにどのプロパティかを示すプロパティトークン（at_property）を含める必要となります。 at.js利用だとat.jsの読み込み前にAdobe Target > Properties > 対象プロパティのImplementation Code（scriptタグ）を配置しておくと対応されますが、Web SDKだと対応が異なりますので、本記事でご紹介したいと思います。 Adobe Targetにてプロパティトークンを取得する ここはat.js利用と同じです。ただし、Web SDKでは、Implementation Codeそのものではなくその中のat_property値を使用します。 前出のAdobe Target > Properties > 対象プロパティのコードアイコンをクリックします。ポップアップウインドウにImplementation Codeが表示されますので、at_property値をコピーします。at_property値はダブルクォーテーションで囲まれた箇所となります。例えばImplementation Codeが以下の場合だと、「XXXXXXXX-YYYY-ZZZZ-1234-AAAAAAAAAAAA」となります。 <script> function targetPageParams() { return { “at_property”: “XXXXXXXX-YYYY-ZZZZ-1234-AAAAAAAAAAAA” }; } </script> at_property値はData Streamやルールなどで設定します。 データストリームのAdobe Targetサービスに設定 Web SDKでAdobe Targetを利用するためには、まずデータストリームにAdobe Targetサービスの追加が必要です。その設定内のProperty Token Overrides欄がありますので前出のat_property値を設定します。（複数ある場合には改行区切りで指定します） プロパティトークンをエクステンションやルールで使い分ける データストリームの設定が完了しましたら、エクステンションあるいはルールで設定します。   Adobe Experience Platform Tagsプロパティでは、エクステンション「Adobe Experience Platform Web SDK」やルール（「Adobe…

はじめに 今回はAdobe Targetでアクティビティ設定を行う際に使っているちょっとした小ネタを紹介します。 スケジュール設定関連 あれ、Goal & Settingsで開始日時を設定したのに、時間になってもアクティビティがLiveになっていない？ということがあったりします。 こちらは、アクティビティのステータスを「Scheduled」としておく必要があります。スケジュールを設定したら合わせて対応しましょう。 Scheduledに変更するにはActivateを選択するだけです。※前出のDuration設定がないとそのままLiveとなりますのでスケジュール設定は事前に行います。以下はScheduledの表示例となります。 アクティビティ名やオファー名をオファーHTMLに追加する アクティビティ名やエクスペリエンス名は「${campaign.name}」、「${offer.name}」でオファーに埋め込むことができます。パターンが多い施策の検証などで活用できるかと思います。例： 配信された上記オファーがページに埋め込まれた表示例 参考https://experienceleague.adobe.com/ja/docs/target/using/experiences/offers/passing-profile-attributes-to-the-html-offer ChromeのDeveloper Toolの要素タブの検索欄の活用 こちらはChrome関連の話題になります。HTML内の文言を探すのにはよく使われると思いますが、CSSセレクタでHTML要素を探すことができたりもします。例えば、Adobe Targetのエクスペリエンス設定で施策箇所をCSSセクレタで指定しますが、これが正しいかどうかをチェックするといったことにも転用できます。 検索欄は以下の手順で表示されることができます。 Developer Toolを開きます 要素タブを選択します HTMLの任意の箇所をクリックした後、Control + F（MacだとCommand + F）をクリックします 検索欄が表示されたら、探したいHTML要素のCSSセレクタを入力します。例えば、以下はFollow UsのFacebookアイコンのセレクタ（.futuriowp-facebook）を入力して検索した例となります。 おわりに いかがでしょうか？今回は２点紹介しましたが、他にも役立ちそうな小ネタがありましたらまた紹介できしたいと思います。ちょっとした小ネタでしたが、なにか参考になれば幸いです。Implement Digitalでは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の導入・実装・運用を支援するサービスを提供しています。ご興味がありましたらお問い合わせください。