JQuery Plugin - Android /IOS SmartBanner
主題： |
Jquery Plugin - Android /IOS SmartBanner |
文章簡介： |
介紹使用JQueryPlugin smart-app-banner |
作者： |
林芃彣 |
版本/產出日期： |
v.1 / 2016/12/19 |
1. 前言
現在手機APP盛行，很多網站都有推出app版本供手機或平板用戶使用，此次介紹的JQuery Plugin可以在Mobile Web中自訂smartAppBanner 以利用戶連結到app商店頁面
2. 目的
• 了解如何使用jQuery Plugin - smartApp Banner
3. 開始前準備
本網頁建立於以下版本的環境：
• Tomcat v6.0
• HTML5
• JQuery v1.8+
•Jasny-jquery.smartbanner-v1.0.0-67
• 瀏覽器
4. 開發情境
在IOS下如需要增加Smart App Banner只需新增meta 的apple-itunes-app訊息，範例如下 :
在Android的部份則需使用JQuery Plugin來達到此效果 :
1. 下載jasny-jquery.smartbanner v1.0.0-67
2. Header宣告
紅框處的app-id可於googleplay商店的網址得知；例如 youtube app 的網址是https://play.google.com/store/apps/details?id=com.google.android.youtube
該app-id 則為 com.google.android.youtube
3. JS調用方式
另外還有些參數可以設定，如下表
key |
說明 |
title |
預設抓取html <title>欄位 |
author |
預設抓取html meta<author>或hostname欄位 |
price |
App售價 |
appStoreLanguage |
App商店語言 |
inAppStore |
IOS的價格說明文字欄位 |
inGooglePlay |
GooglePlay的價格說明文字欄位 |
icon |
Icon圖片URL，預設抓取<meta name="apple-touch-icon"> |
url |
Button URL ; 如果希望按鈕鏈接到應用商店，請使用null。 |
button |
install button文字 |
scale |
隨視窗大小縮放(1=禁用) |
speedIn |
顯示Banner的動畫速度 |
speedOut |
關閉Banner的動畫速度 |
daysHidden |
關閉Banner後隱藏的時間（0 =始終顯示Banner） |
daysReminder |
點擊“View”後隱藏Banner的時間（0 =始終顯示橫幅） |
force |
填入 'ios', 'android','windows'. 或填寫null 不做browser check 永遠顯示banner |
hideOnInstall |
true / false ;當"VIEW"被點擊 隱藏banner |
layer |
true / false ;是否覆蓋頁面 |
iOSUniversalApp |
true / false ; 如果iOS app是通用於iPad和iPhone，則向iPad用戶顯示Smart Banner。 |
appendToSelector |
Banner Append selector |
onInstall |
Fuction ;點擊view時可以使用該fuction做log寫入或其他動作 |
onClose |
Fuction ;關閉banner時可以使用該fuction做log寫入或其他動作 |
5. 總結
此篇文章中可了解如何在MobileWeb上使用Smarrt Banner藉此推廣並增加我們的app下載量
IOS:
Android:
6. 參考來源
• 使用JQuery版本－
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
• smartbanner - jasny-jquery.smartbanner
https://github.com/jasny/jquery.smartbanner
