建立瀏覽頁的橫幅和動態橫幅

橫幅是顯示在系列瀏覽頁中的項目。橫幅有兩種類型:

基本橫幅 – 基本橫幅是顯示在瀏覽頁中的影像。點選橫幅可以不執行任何動作,也可以觸發某個動作。例如,點選橫幅可以啟動網頁、連結至其他文章或系列,或是傳送電子郵件、簡訊或撥打電話。橫幅也非常適合用來顯示品牌,或是在瀏覽頁中提供視覺分隔線。

動態橫幅 – 動態橫幅會在瀏覽頁上顯示 HTML 內容。例如,動態橫幅可顯示股票報價、投影片輪播,或是社交媒體摘要。運用 Cordova 增效模組,您將可以受益於 AEM Mobile 的特定功能,例如:讓用戶在點選橫幅中的一張投影片時,導覽至文章或顯示權益登入提示。

基本橫幅

橫幅的外觀是由指派給橫幅的卡片所決定。橫幅影像會視需要進行置中、縮放和裁切,以配合對應的卡片區域尺寸。請建立尺寸夠大的橫幅影像,以便適當地顯示在卡片中。請參閱「最佳化用於 AEM Mobile 的內容」。

  1. 在「內容與版面」中,按一下「內容」,然後按一下「新增 > 新增橫幅」。

  2. 指定在此專案中獨有的橫幅名稱。

  3. 指定橫幅的中繼資料。

    當您使用對應規則將內容對應至卡片時,您可能會想要新增中繼資料來區分橫幅與其他內容。

  4. 指出在點選橫幅時會發生什麼事。

    如果用戶點選橫幅時,橫幅不應該執行任何作業,請選取「無」。

    如果您希望橫幅執行某個動作,請選擇下列其中一個選項:

    http:// – 當用戶點選橫幅時,在應用程式中的瀏覽器內開啟指定的網頁 (http: 或 https:)。

    範例:http://www.adobe.com

    navto:// – 跳至指定的文章或系列。請注意,文章中的頁碼連結不受支援。如需有關 navto 格式的詳細資訊,請參閱「AEM Mobile 文章中的超連結」。

    範例:navto://collection/coffeeProducts

    mailto: – 使用裝置的預設電子郵件應用程式來傳送電子郵件。

    簡單範例:mailto:jane@example.com

    詳細範例:mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line。

    sms: – 使用裝置的訊息應用程式來傳送簡訊。

    簡單範例:sms:1-206-555-2323

    詳細範例 (iOS):sms:+1206-555-2323&body=Text%20message

    詳細範例 (Android):sms:+1206555-2323?body=Text%20message

    tel: – 使用裝置的電話應用程式打電話。

    範例:tel:1-206-555-2323

    導覽至首頁系列 – 返回頂層系列中的第一個文章或系列。

    向後導覽 – 返回上一個瀏覽器頁面或文章,用戶是從此處點選或按一下以導覽至目前的瀏覽頁 (向後導覽不包括行動裝置上的滑動手勢)。

    mailto、sms 和 tel 動作只在行動裝置上受到支援。在桌面網頁檢視器中則沒有作用。

  5. 使用「影像」索引標籤上傳橫幅影像。

    如果您不想要在橫幅中使用影像 (例如,您只想要顯示橫幅標題或顏色),您可以上傳任何影像檔案,然後建立不顯示影像的卡片。

  6. 將橫幅新增至系列中。請務必將橫幅適當地放置在系列中 (例如最上方),這樣它才會出現在瀏覽頁上的適當位置。

  7. 如有必要,請編輯版面範本以包含將顯示橫幅的卡片。

    例如,您可以建立涵蓋裝置寬度的卡片,也可以建立將卡片對應至任何橫幅的規則。請參閱「建立卡片和版面」。

動態橫幅

動態橫幅會在瀏覽頁中顯示 HTML 內容。

  • 如果您在瀏覽頁上使用多個動態橫幅,請在目標裝置上測試該體驗,以確定效能是否可靠。如果瀏覽頁的載入時間太長,或是遭遇到其他問題,請考慮在瀏覽頁上使用較少的動態橫幅。
  • 針對橫幅選擇性使用縮圖影像。如果用戶處於離線狀態,或者影像是顯示在透明 HTML 內容後方,則影像會非常有用。
  • 如果您在動態橫幅中使用 Cordova 增效模組,請務必在動態橫幅屬性中選取「啟用擴充性功能」。
  • 當在 HTML 檔案中參照外部內容時,建議您使用 HTTPS 通訊協定來取代 HTTP。桌面網頁檢視器必須使用 HTTPS 通訊協定。
  • 您可以使用 <video playsinline autoplay> 元素在動態橫幅中自動播放影片。如果影片在橫幅顯示之前就自動播放,請考慮使用可在 window.onAppear 事件中播放影片以及在 window.onDisappear 事件中暫停影片的 JavaScript。

 

動態橫幅影片

動態橫幅影片

權益橫幅範例

請使用此 HTML 內容來建立權益動態橫幅。如果用戶未登入,橫幅中會顯示登入提示。如果用戶已登入,則橫幅中會顯示「登出」按鈕。當您建立動態橫幅時,請務必選取「啟用擴充性功能」以啟用 Cordova 增效模組。

下載

建立動態橫幅

  1. 建立 HTML 內容及產生文章檔案。

  2. 在「內容與版面」中,按一下「內容」,然後按一下「新增 > 新增動態橫幅」。

  3. 指定在此專案中獨有的橫幅名稱。

  4. 指定橫幅的中繼資料。

    當您使用對應規則將內容對應至卡片時,您可能會想要新增中繼資料來區分橫幅與其他內容。

    註解:

    如果您的 HTML 內容包含對 Cordova 增效模組的參照,請務必選取「啟用擴充性功能」。

  5. 使用「影像」索引標籤上傳橫幅影像。

    選擇性使用橫幅影像。如果裝置處於離線狀態,或是將橫幅影像當作透明 HTML 內容的背景,則橫幅影像會非常有用。

  6. 使用「內容檔案」索引標籤,上傳含有 HTML 內容的文章檔案。

  7. 如果動態橫幅是廣告,請使用「廣告」索引標籤來指定分析資料的資訊。

  8. 將橫幅新增至系列中。請務必將橫幅適當地放置在系列中 (例如最上方),這樣它才會出現在瀏覽頁上的適當位置。

  9. 如有必要,請編輯版面範本以包含將顯示橫幅的卡片。

    例如,您可以建立涵蓋裝置寬度的卡片,也可以建立將卡片對應至任何橫幅的規則。請參閱「建立卡片和版面」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策