公司最近參展要拓展市場想請客戶追蹤IG及FB,現場提供Qrcode給客戶進行掃描,掃描後都是開啟網頁後,客戶往往都沒有登入網頁版的IG或FB,需要再進行登入這使用體驗讓客戶都想放棄追蹤了。
對於事後檢討流程時,發現市面上的跳轉工具不是非常緩慢須等個5~15秒,不然就是跳轉過去後未安裝APP的就直接掛在那邊,對於行銷人員推廣或是使用者體驗都非常差勁。
決定直接寫一段專用的跳轉程式碼,來達成以下幾種況狀:
- 手機掃描
- 未安裝 Instagram APP 的 > 自動開啟 Instagram 網頁並帶向指定頁面。
- 有安裝 Instagram APP> 自動開啟Instagram APP 並帶向指定頁面。
- 電腦開啟連結或掃描
- 自動開啟 Instagram 網頁並帶向指定頁面。
方案一、直接使用以下連結(推薦)
如果沒有網站的也沒關係,小編提供託管全球CDN上的跳轉頁面,免費協助各位在創業可以更快速的建立粉絲團及追蹤數喔。
https://www.cjkuo.net/q/ig.html?ig=<你的IG ID>
<!-- 範例-->
https://www.cjkuo.net/q/rd.html?ig=kuo4j
取得連結後可用 Qrcode 的產生網站,來建立適合企業的 QRcode 樣式,讓客戶不管是實際來訪或線上點選時都可以快速的產生互動喔!!
方案二、想自行託管程式碼並且有主機的人
請在主機上建立一個html檔案,這裡的範例取名為 ig.html,並把下列程式碼貼入檔案中。
<!DOCTYPE html>
<html>
<head>
<title>自動跳轉IG頁面</title>
</head>
<body>
<p><a class="list"></a></p>
<p><a class="list2"></a></p>
<p style="text-align:center">Power by <a href="https://www.cjkuo.net/">cjkuo.net</a></p>
<script>
let igURL = new URLSearchParams(document.location.search);
var username = igURL.get("ig");
var el = document.querySelector(".list");
var el2 = document.querySelector(".list2");
if (username !== null) {
var beforeTime = Date.now();
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
window.location = "instagram://user?username=" + username;
} else if (/(Android)/i.test(navigator.userAgent)) {
window.location = "instagram://user?username=" + username;
} else {
window.location = "https://instagram.com/" + username;
}
var link = "https://instagram.com/" + username;
var text = '<img alt="IG" src="https://img.icons8.com/clouds/150/000000/instagram.png" style="display:block; margin:auto;" loading="lazy">';
el.innerHTML = '<a href="' + link + '">' + text + "</a>";
el2.innerHTML = '<h1 style="text-align:center">將自動開啟 Instagram</h1> <p style="text-align:center">如果沒有自動開啟請點擊透上方圖示開啟</p>'
setTimeout(function() {
var afterTime = Date.now();
if (beforeTime - afterTime < 2000) {
window.location = "https://instagram.com/" + username;
}
}, 100);
} else {
var link = "https://instagram.com/";
var text = '<img alt="IGG" src="https://img.icons8.com/clouds/150/000000/instagram.png" style="display:block; margin:auto;" loading="lazy">';
el.innerHTML = '<a href="' + link + '">' + text + "</a>";
el2.innerHTML = '<h1 style="text-align:center">未帶入正確參數</h1> <p style="text-align:center">系統不會自動跳傳至指定頁面</p>'
}
</script>
</body>
</html>
接下來就是最簡單的部分了,把您的IG帳號填入下方連結中
https://你的網域/ig.html?ig=<你的IG ID>
<!-- 範例-->
https://www.cjkuo.net/ig.html?ig=kuo4j
## 上面連結僅供示範,此連結為無效連結
##如需使用請參考範例一
最後一樣可以根據需求前往產生 QRcode 的網站,建立專屬的QRcode喔
正常運作圖示
在運作正常的情形下進入跳轉頁面後,會在2秒內引導至正確頁面。
錯誤排除
如果URL中的參數輸入錯誤會顯示以下圖示,請修正後再嘗試一次。
工商時間
企業或個人用戶在使用腳本有需要提供以下客製化協助,如跳轉頁面增加Google Analytics強化追蹤數據、企業網域託管、客制化跳轉頁面及協助安裝腳本等等服務,都歡迎詢問及洽談。