Optimizely DAM と Web サイトの統合jhoose

これは、Optimizely DAM について書いているシリーズの 2 番目の投稿です。この投稿では、DAM を Web サイトと統合する方法を説明します。 DAM の機能に興味がある場合は、最初の記事をお読みください。 コンテンツ マーケティング向けの Optimizely DAM 機能の探索

はじめる

Optimizely DAM と Optimizely CMS の統合は簡単です。 nuget パッケージをインストールします。

dotnet add package EPiServer.CMS.WelcomeIntegration.UI

次に、スタートアップに次のコードを追加します。

services.AddDAMUi();

詳細については、Optimizely Web サイトを参照してください。 CMS の CMP DAM アセット ピッカー。

完了すると、DAM からアセットを選択して Web サイトで使用できるようになります。現時点ではまだ 3 つの課題に直面しています

これらの問題の一部は、編集者に最適な画像を選択する責任を負わせることで解決できるかもしれませんが、私はもっと良いアプローチがあると感じています。

Optimizely はメタデータを取得するためのタグ ヘルパーを作成しました (CMS の CMP DAM アセット ピッカー）ですが、これはレート制限のある CMP RestAPI を使用していると思います。そのため、これにより Web サイトでパフォーマンスの問題が発生すると予想されます。

デジタル資産の変革 （それ）

パフォーマンスの問題に対処するために、画像のサイズを動的に変更できます。これは簡単に実行でき、CDN によって処理され、サイズが変更されると CDN はキャッシュされたバージョンを返します。

?width=500&height=500

詳細については、次のページを参照してください。 Optimizely CMP API から画像のサイズを動的に変更する。

画像を動的に変換すると、上記の問題のいくつかは解決されますが、まだ問題が残っているように感じます。

グラフを入力してください

前の 2 つのアプローチでは、編集者が画像の最適なバージョンを選択し、動的変換を使用して画像のサイズを変更することに依存していました。理想的なアプローチは、編集者が画像を選択し、使用する最適なレンディションをコードに解決させることです。

あまり公表されていませんが、DAM には GraphQL エンドポイントがあり、これを使用すると、コア アセット データ、メタデータ、さらにはレンディションにアクセスできるようになります。

インスタンスでこれを有効にすることについては、Optimizely に相談してください。

アプローチ

エディターは引き続き DAM から画像を選択しますが、次のようになります。

レンディション

サイトで必要な画像サイズの要件ごとにレンディションを作成すると、大量に作成することになり、時間の経過とともに管理が難しくなります。代わりに、さまざまなアスペクト比のレンディションを作成することに集中します。また、すべてのレンディションの形式を WEBP (非可逆圧縮) に設定しました。

コード例s

以下のコード例は、DAM と統合し、Web サイトで最適化された画像を使用するために使用するアプローチを詳しく説明しています。

画像の寸法を構成する

カスタムタグヘルパー

私は、標準のイメージ タグを 2 つの新しい属性で拡張するだけのカスタム タグ ヘルパーを開発しました。

このコードは、参照されたコンテンツが DAM からのものであること、および登録されたコンテンツが使用されているかどうかをチェックします。 IImageHelper DAM から正しいレンディションを取得します。

IImageHelper

以下のコードは、DAM グラフからレンディション情報を取得し、要求された画像サイズに最適なレンディションを計算します。

以下の例で使用されているロジックは改善する必要があり、アスペクト比に最適な画像が得られません…しかし、ニーズに最適に応えるロジックを構築する必要があります。

IOptiDAMGRAPHサービス

このサービスは、DAM にクエリを実行し、レンディションや代替テキストを含む画像情報を返す役割を果たします。また、応答をキャッシュしています。これにより、ネットワーク リクエストの数を減らすことができます。

Github リポジトリ

統合アプローチを実証するためのソリューションを作成しました。このコードを自由に取得して、独自のプロジェクト内で使用できます。 https://github.com/andrewmarkham/Opti-Dam

ソリューションには 2 つのプロジェクトが含まれています。

これらのスケジュールされたジョブは両方とも、REST API の使用例です。

結論

このブログ投稿が DAM との統合がいかに簡単であるかを示し、リポジトリ内のコードが開発チームにとって役立つことを願っています。

もう一つ

OMVP サミットの Opticon でプレゼンテーションを行っている間、何人かの人が Cloudflare Edge の画像サイズ変更の使用について言及していましたが、その時点まで私はこれが DXP でホストされている画像にのみ機能すると思っていたため、検討すらしていませんでした。サービスの外部 URL を渡すことができるとは知りませんでした。

DAM からのレンディションに加えて Edge のサイズ変更を使用することは、検討する価値のある組み合わせだと思います。レンディションでは、焦点を使用してトリミングされた画像が提供され、Cloudflare によってさらに画像が最適化されます。