tedshd's DevNote

Develop & Design Note by Ted

JavaScript - 計算網頁元件的曝光

JavaScript - 計算網頁元件的曝光

因為某些需求需要精確計算某些網頁上的 UI 元件的曝光

沒錯

就是要像廣告計算 impression 一樣

之前只要確認有該元件的 request 就好了

但是為了精確追求計算曝光, 所以必須做到像 Google Ad 一樣

要到該網頁元件讓使用者看到後才能計算曝光

聽起來這要求不太容易

但是實作下去其實發現還好誒!!

概念

DOM 元件進入可視範圍觸發 impression

所以需要能夠釐清一些問題

  1. 如何確認可視範圍?

  2. 如何確認要記錄 impression 的 DOM 元件在可視範圍?

  3. 如何在進入可視範圍時觸發?

看似困難

但是如果熟悉 JavaScript Window 物件和 DOM 物件的話就會發現很好解

實作

如何確認可視範圍?
window.document.documentElement.clientHeight

window.document.documentElement.clientWidth

完美解決

如何確認要記錄 impression 的 DOM 元件在可視範圍?
<DOM Object>.getBoundingClientRect();

完美解決

但是要取到對應可是範圍的位置建議使用(top, left), x y IE 和 Edge 不支援

還有一點要注意就是該 DOM 要先長在 browser 上面且不是 display: none 的狀態才能拿到值

Refer - Element.getBoundingClientRect() - Web API 接口 | MDN

Refer - ClientRect object (Internet Explorer)

如何在進入可視範圍時觸發?

這就得取決於使用情境了

在適當的 Event 去觸發

Ex:

在 list view 時就單純的用 scroll 事件觸發確認是否是進入可視範圍(當然得做 debounce 處理)

在 carousel view 就滑動或點擊觸發轉動時確認是否是進入可視範圍(如果有做動畫效果, 得等到動畫效果結束再去確認)

結論

熟悉基本 API 後就可以很輕鬆地解決很多問題 XD

最後附上包好的套件

GitHub - impression

LINE - 2018 1111 分享得 LINE point 研究筆記與分析報告

LINE - 2018 1111 分享得 LINE point 研究筆記與分析報告

MGM(member get member) 的模式一直以來都會是一個有規則可循且有時難度也不高的活動模式(因為難度高就不好擴散

這次以 LINE 2018 年 1111 分享連結的 LINE point 為例子當作我們這次的研究對象

大致規則

分享該訊息給朋友

會是如下圖所示

活動辦法引言

活動辦法:
● 好友點選您分享的連結進入LINE購物首頁,若成功您將會收到『LINE購物官方帳號』通知抽獎囉。分享者需透過活動頁分享網址,邀請朋友點入LINE購物並完成登入,才能獲得點數。
● 轉發他人的分享網址,點數將會計算給原分享者。
● 請先加入『LINE購物官方帳號』好友以及解除封鎖可獲得參與活動資格與收到LINE 購物抽獎/得獎通知。
● 分享給同一名好友,最高可獲得1次抽獎機會,若要再獲得抽獎機會請分享給其他好友。
● 各平台折扣碼「LINE11」,使用期間:2018/11/10 - 2018/11/11折抵金額與使用方式請見各平台規範。活動詳請請見:https://lin.ee/5JVllUj/rcf
● 此分享活動時間為2018/11/5 11:00至2018/11/9 23:59(台灣時間)。收到抽獎券之用戶,須於2018/11/12 23:59(台灣時間)前點擊抽獎網址,逾期未完成抽獎者視同放棄並自動取消資格。
● 本次活動限LINE帳號已綁定台灣手機門號用戶參加

那上述規則就令人產生一些聯想

那大家互相分享再去點開連結就可以得到點數了呢!

研究

本持著攻城獅的研究精神

就發現有人分享了一份 Google 表單

上面記錄了許多人填出來的分享 URL(當然也有來亂的XD)

那麼接下來就可以開始一件事, 那就是點連結拉

但是在 Line 開這表單再點連結好累喔

那這時候又有個思路就是可以讓這過程自動化阿

但是要在模擬器上登入 LINE 很麻煩(因為 LINE 只能同時登入一台手機)

那換個思路

既然是連結那總可以在 browser 打開吧

ok

當你那麼做以後又發現一件事了

好像沒用誒

當然你把分享連結在電腦上用 browser 開

他怎麼知道是哪一個 user 打開的呢

那是否能解決這問題呢?

是的

可以解決

拜 LINE 越來越開放的機制還有 LINE APP 大量使用 webview 的關係

所以現在可以在電腦 browser 登入 LINE 帳號(其實主要是開發 LINE bot 或使用 LINE API 等服務使用的)

那麼這問題就迎刃而解了

身為一個攻城獅還是略懂略懂怎麼讓這個東西自動化的

這裡分享個其他人的做法

有一些方法可以大量開啟URL

但是會是一次大量開啟

所以說如果有 3000 個連結, 一次開 3000 個連結電腦不當掉才怪

實作

所以只要搞一個方式是開一個分頁然後一直把連結在那個分頁開啟即可

但是身為一個注重使用者體驗的攻城獅

一定要有良好的使用體驗和輕鬆入門的方式

目標一定是要用最簡當的方式讓不懂程式的廣大民眾能輕鬆入門

所以就是提供一段程式碼請一般人貼到 chrome 的開發者工具中的 console 即可

  1. 方便使用

  2. 可以設定多久開下一個連結

  3. 會用 localstorage 紀錄上次開到哪個連結, 下次就可以繼續不必重跑

大致就可以達到目的了

但是得到點數的通知還是要去 LINE 裡面點試試手氣誒!

沒有太大的問題

那麼整個活動到了最後一步

抽獎

LINE 會以通知的方式通知 user 可以點 LINE 裡的 show card 去抽獎

那麼只要有辦法拿到點抽獎頁的 link 即可(因為那頁是 WebView XD)

那頁特別的是使用 line: 這個自訂的 protocol 所以得在 LINE 裡面打開

那麼你把連結貼在 LINE 的訊息上即可在那一直點了

不用去 LINE 購物裡面點

那麼最後一步就是寫自動化去自動抽點數了拉(不用再自己點了 XD

但是這有個門檻在

因為手機自動化測試的環境安裝有一點難度

但網路上也有許多自動化測試的文章這裡就不詳述了

起源

小弟原本興致缺缺

但是看到第一天小弟所在的群組有人在討論

然後表單就蹦的出來了

然後就蹦的出現上面開大量連結的方法

然後小弟表示哪有那麼傻逼的方法

電腦哪撐得住阿, 而且表單會一直更新, 那麼傻逼的行為我無法接受

所以就提供了上述的方法

原本想說搞完連結就算了

但是就不知不覺就陷進去了...

然後就搞到最後都全自動了...

活動觀察

其實小弟活動第二天才參與

所以第一天的高峰期就錯過了

因為第一天 LINE 沒有做足夠的準備

第一天都可以一直抽到點數, 但是抽點的頁面被 DDOS, 幾乎沒法進去

然後第二天 LINE 就把抽不中的機率提高到一個不可思議的地步

而且似乎把發放的 LINE point 數量做了數量控管

但是持續間隔一小時去打的話還是能試出來何時有點數可以抽

結語

做 MGM 活動真的要小心

連我們自己公司的服務在做的時候比 LINE 更嚴謹都還是會出現有人弄成程式去跑(我們還強制綁 SMS 一樣沒用, 對方似乎是用 提供手機號碼的服務去繞過這一段)

基本上因為自動化程式的出現, 只要花點時間了解規則和撰寫腳本, 是不容易防不住的

當然也是還有很多增加難度的方式

例如:

  1. 擋 IP

  2. 擋住該使用者

  3. 設定條件上限

這些都是增加難度的一些措施

當然還有很重要的是主辦方是有權利修改活動辦法抑或發現是有非正常流程與方式來完成活動可以取消資格的方式來處理

Mac - shell script check OS

Mac - shell script check OS

Use shell script check Linux or Mac

#!/usr/bin/env bash


if [ `uname` == 'Linux' ];
then
    echo 'Linux'
else
    echo 'Mac'
fi