Shop online with AR Quick Look

ハイライト

Apple は、AR Quick Look で Apple Pay、カスタム アクション、カスタム HTML Web バナーを提供しており、小売 Web サイトが製品プレビュー後の購入、追加購入、またはビジネス チャットの相談を Web ページのプロセスに直接接続できるようになります。

主要内容

電子商取引 Web サイトに AR プレビューが導入されると、ユーザーは自分の部屋に椅子、目覚まし時計、ギターなどを置くことができるようになります。問題は次のステップにあります。読んだ後、プレビューを終了し、製品ページに戻り、ボタンを見つけて、購入または問い合わせを続行する必要があります。 AR は「正確に見る」という問題を解決しますが、購入へのリンクはまだ切り開かれています。

このセッションでは、AR Quick Look の焦点をコマース ワークフローに置きます。 Apple は Web ページで USDZ リンクとフラグメント識別子を継続し、小売業者が既存の製品ページに AR 購入プロセスを統合できるようにします。開発者は、製品情報、ボタンの種類、またはカスタム HTML URL をリンクに入力するだけで、システムは AR Quick Look の下部に永続的なバナーを表示できます。

バナーをクリックすると AR Quick Look が閉じて、messageイベントは元のページに通知します。次に、Web ページは、Apple Pay をポップアップする、ショッピング カートに追加する、サイズを尋ねる、マップを開いて店舗を見つける、またはビジネス チャットにジャンプすることを決定します。ユーザーは、Web ページ、支払い、AR プレビュー間の安全な境界を技術的に維持しながら、同じショッピング アクションを確認できます。

この設計は、小売チームが段階的にオンライン化するのに適しています。最初のステップで必要なのは 1 つだけですrel="ar"リンク。 2 番目のステップは、Apple Pay またはカスタム アクションを追加することです。 3 番目のステップは、カスタム HTML バナーを使用して、ブランド コンテンツ、サービス ポータル、または会話型購入プロセスを追加することです。

詳細

1. 使用するrel="ar"AR クイック ルックをカスタマイズするためのフラグメント識別子

(05:47) Web ページから AR Quick Look への入り口は、依然として USDZ へのリンクです。rel="ar"これが AR コンテンツ、URL であることを Safari に伝えます#カスタムパラメータは後で追加します。セッションでは、最初に 2 つの基本パラメータを確認します。canonicalWebPageURL共有リンクをオーバーライドするために使用されます。allowsContentScaling=0ユーザーがモデルをスケーリングできないようにするために使用されます。

<a rel="ar" href="alarm-clock.usdz#canonicalWebPageURL=https://developer.apple.com/alarm-clock-product-page/&allowsContentScaling=0">
    <img src="alarm-clock-thumbnail.jpg">
</a>

キーポイント:

• rel="ar"Safari で AR Quick Look を直接開き、サムネイルに AR ロゴを表示させます。
• href実際の USDZ ファイルを指定します。#次のパラメータは AR Quick Look によって解析されます。
• canonicalWebPageURLデフォルトの共有ターゲットをオーバーライドして、ユーザーが現在のギャラリー ページを回避して製品ページのリンクを共有できるようにします。
• allowsContentScaling=0目覚まし時計や家具など、実物大で見る必要があるアイテムに最適です。
• 実際の URL で複数のパラメータが使用されている&連結、スペースを含む値はパーセントエンコードが必要です。

2. Apple Pay バナー: 購入ボタンを AR プレビューに表示する

(08:53) Apple Pay バナーは、小売店との最も直接的な統合です。そのレイアウトはシステムによって提供されます。製品のタイトル、サブタイトル、価格が左側に表示され、Apple Pay ボタンが右側に表示されます。 session には、次の 4 つの必須パラメータが明示的にリストされています。applePayButtonType、checkoutTitle、checkoutSubtitleそしてprice。

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>

キーポイント:

• id="ar-link"後続の JavaScript リスナーにアンカー ポイントを提供します。
• applePayButtonType=plainApple Pay ボタンのスタイルを選択します。セッションでは、支払い、チェックアウト、予約、寄付、購読などのタイプについても言及しています。
• checkoutTitleそしてcheckoutSubtitleこれはバナー上の製品情報であり、渡す前に URL エンコードする必要があります。
• priceWeb ページによって提供される場合、多言語 Web サイトをサポートする場合は、ロケールに従ってローカライズする必要があります。
• 支払い情報は AR Quick Look では収集されません。ユーザーがクリックすると Web ページに戻り、Web ページから Apple Pay シートがポップアップします。

3. カスタム アクション バナー: ボタンにさまざまな購入ステップを提供させます

(11:42) 一部のアイテムはすぐに支払うことができません。予約販売品の場合は郵便ポストの回収が必要な場合があり、衣類のサイズを最初に選択する必要がある場合があり、大型商品の場合は近くの店舗を探す必要がある場合があります。カスタム アクション バナーはシステム テンプレートのレイアウトを保持しますが、Apple Pay ボタンを開発者が提供するテキストに置き換えます。

<a rel="ar" id="ar-link" href="kids-slide.usdz#callToAction=Preorder&checkoutTitle=Kids%20Slide&checkoutSubtitle=Enjoy%20the%20playground,%20right%20from%20your%20home&price=$145">
    <img src="kids-slide-thumbnail.jpg">
</a>

キーポイント:

• callToAction=Preorderボタンのコピーを定義します。これは次のように置き換えることができます。Add%20To%20Cart、Find%20In%20Storeビジネス上のアクションを待ちます。
• checkoutTitleそしてcheckoutSubtitle引き続き商品説明を承ります。
• priceiOS 14 のカスタム アクションではオプションになります。古いシステムでも引き続きそれを提供する必要があります。
• クリック後、Web ページは後続のロジックを処理します。ショッピング カートに追加したり、サイズを尋ねたり、Apple マップを開いて店舗を確認したりできます。

4. カスタム HTML バナー: ブランド コンテンツを下部領域に配置します。

(13:39) 3 番目のスタイルでは、開発者がカスタム HTML ファイルを提供できます。より複雑なブランド コンテンツ、宣伝メモ、または会話のきっかけを表示するのに適しています。 AR Quick Look のセキュリティ要件を満たすには、HTML リソースを HTTPS 経由で提供する必要があります。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=small">
    <img src="solar-panels-thumbnail.jpg">
</a>

キーポイント:

• customパラメータはカスタム HTML ファイルの絶対 URL を指します。
• カスタム HTML では HTTPS を使用する必要があります。そうでない場合、バナーは表示されず、リクエストは無視されます。
• customHeightできるsmall、mediumまたはlarge。
• 省略customHeightAR Quick Look では高さが低くなります。
• セッション内のビジネス チャットの例は、メッセージでギターの AR プレビューを受信し、会話中に問い合わせと注文を続けます。

(14:04) より多くの垂直方向のスペースが必要な場合は、高さを中程度に増やすことができます。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=medium">
    <img src="solar-panels-thumbnail.jpg">
</a>

キーポイント:

• 媒体の高さは 121 ポイントで、もう 1 行の説明やよりわかりやすい操作入力に適しています。
• 高さは引き続き AR Quick Look によって制御され、Web ページは列挙値のみを送信します。

(14:09) バナーに強力な表示機能が必要な場合は、大きいサイズを使用できます。

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=large">
    <img src="solar-panels-thumbnail.jpg">
</a>

キーポイント:

• 高さは 161 ポイントで、より完全なマーケティングまたはサービスの入り口を配置するのに適しています。
• 高さが高くなるほど、ユーザーの製品の視界を妨げないように、より多くの情報密度を制御する必要があります。

5. バナーのクリックを監視し、ユーザーを Web ページに戻す

(16:31) 3 つのバナーはすべて、最終的には同じ Web ページ イベントに依存します。開発者がARリンク設定を行うid、その後監視しますmessage。いつevent.data等しい_apple_ar_quicklook_button_tappedユーザーが AR Quick Look のバナーをクリックすると、Web ページがそれを認識します。

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>


<script type="application/javascript">
    const linkElement = document.getElementById("ar-link");
    linkElement.addEventListener("message", function (event) {
        if (event.data == "_apple_ar_quicklook_button_tapped") {
            // handle the user tap.
        }
    }, false);
</script>

キーポイント:

• document.getElementById("ar-link")前に宣言した AR リンクを見つけます。
• addEventListener("message", ...)WebKit が Web ページを返送したときに通知を受け取ります。
• _apple_ar_quicklook_button_tappedユーザーがバナーをクリックしたことを示します。
• 注釈の場所は、Apple Pay の呼び出し、ショッピング カートへの追加、ビジネス チャット URL へのジャンプなど、実際のビジネス ロジックに接続されている必要があります。
• AR Quick Look が最初に閉じてから、制御を Web ページに戻します。支払いとビジネス処理は引き続き元のサイトで行われます。

重要ポイント

1. 高単価商品向けに AR から Apple Pay へのショート パスを追加する

やるべきこと: AR Quick Look を家具、スピーカー、ランプなどの製品ページに追加し、下部のバナーに Apple Pay を配置します。

実行する価値がある理由: セッション表示プロセスにより、ユーザーはサイズと外観を確認した後、直接支払いを開始できるため、AR 終了後に再度購入ボタンを見つける手順が軽減されます。

開始方法: まず、すでに USDZ がある商品ページを選択し、追加しますapplePayButtonType、checkoutTitle、checkoutSubtitleそしてprice。それから監視してください_apple_ar_quicklook_button_tapped, Webページに戻ったら、Apple Payシートを開きます。

2. 販売前製品または複数仕様の製品にはカスタム アクションを使用する

手順: AR プレビュー後のボタンを「予約」、「サイズを選択」、または「カートに追加」に変更します。

実行する価値がある理由: カスタム アクションは即時支払いを必要とせず、追加オプションも必要な小売プロセスに適しています。

開始方法: を使用しますcallToActionボタンのコピーを定義し、製品のタイトルとサブタイトルを引き続き提供します。イベントがトリガーされた後、Web ページで仕様選択ポップアップ レイヤーを開くか、カートに追加リクエストを実行します。

3. カスタム HTML バナーを店舗相談の入り口として使用する

対処法: 高額商品や問い合わせの多い商品の AR プレビューにブランド バナーを表示し、ユーザーをビジネス チャットに誘導します。

実行する価値がある理由: このセッションでは、ギターとホームセンターのシーンが表示されます。ユーザーは、実際の空間で製品を見た後も、引き続き質問したり、サービスを手配したり、メッセージで直接購入したりできます。

開始方法: HTTPS HTML バナーを準備し、使用しますcustomAR Quick Look に渡されるパラメータ。クリックイベントで企業のビジネスチャットURLにジャンプするか、最初に製品相談ページを開いてください。

4. 共有リンクを製品詳細ページに戻します。

やるべきこと: ギャラリーまたはイベント ページの USDZ リンクごとに設定しますcanonicalWebPageURL。

実行する価値がある理由: ユーザーが AR コンテンツを共有する場合、受信者は、一時的なプレビュー ページで停止するのではなく、購入できる製品ページに戻って仕様を理解する必要があります。

開始方法: 各 AR リンクを追加しますcanonicalWebPageURL、値は対応する製品詳細ページの絶対 URL を使用し、パラメーターはエンコードされます。

5. 実際のサイズに敏感なアイテムのスケーリングをオフにする

やるべきこと: 目覚まし時計、テーブルと椅子、絵画、家電製品、その他の製品を設置します。allowsContentScaling=0。

価値がある理由: ユーザーがこれらの製品を購入するとき、実際の床面積、壁と壁の比率、既存の家具との関係を気にします。ズームを無効にすることで誤判断を減らすことができます。

開始方法: 製品モデルの実際のサイズを確認し、USDZ 単位が正しいことを確認してから、リンク フラグメントに追加しますallowsContentScaling=0。

関連セッション

• ARKit 4 を探索する — 位置アンカー、深度機能、より現実的な AR 配置の基本について詳しく説明します。
• RealityKit の新機能 — 強化された AR 製品ディスプレイのレンダリング、アニメーション、物理機能について学び続けます。
• USD の最新情報 — USD の資産構造を理解し、共有およびプレビューできる 3D 製品ファイルをチームが準備できるように支援します。
• Wallet と Apple Pay の新機能 - Apple Pay ボタンと支払いフローを補完する最新機能。
• Web 開発者向けの新機能 - Web AR ショッピング エクスペリエンスを向上させるための Safari と WebKit のアップデートを確認してください。