[2023 15th鐵人賽] Day5 - 解析惡名昭彰的滑動廣告

原文連結：悪名高きスワイプ広告を解析する - Qiita

本文摘要

在被使用者厭惡的廣告當中，有一種叫做「滑動廣告」。

容易誤觸是原因之一，但經過調查發現，這個廣告似乎是故意將使用者轉移到廣告頁面，而非單純的誤觸。

滑動廣告是一種藉由左右滑動顯示圖片的廣告類型。

什麼是滑動廣告

滑動廣告是在廣告聯盟網站上常見的廣告形式。

使用者可以用手指在螢幕上左右滑動，藉此切換廣告圖片。

特徵是利用滑動的互動性，使用多個訊息和媒體，提供引人入勝的廣告體驗。

為什麼會惡名昭彰

然而，滑動廣告並不受使用者歡迎。原因是它容易引發誤觸，一不小心點擊廣告導致頁面跳轉的機會非常高。

當然，從使用者的角度來看，可能會以為是自己誤觸了廣告，或是滑動的手指太早移開螢幕，才會導致跳轉到廣告頁面。

然而，根據本次調查結果，滑動廣告似乎是一種設計，即便使用者並未實際誤觸到，也會模擬誤觸的行為。

以下動畫展示當時的行為：

只有思慕昔（スムージー）的廣告，在上下滑動時會跳轉到廣告頁面。

這明顯和漫畫廣告的行為不同。

此外，我們還注意到，左右滑動時也不會造成畫面跳轉。

總結

通過追蹤程式碼，發現滑動廣告只要符合以下條件，就會被視為點擊廣告：

點擊起始位置在廣告區域內
點擊持續時間不超過 250ms
點擊起始和結束位置的 X 坐標差不超過 50pix

換句話說，

從廣告位置開始的垂直滑動，這動作將會被視為強制點擊廣告。

所以，至今為止您感受到的「啊、糟糕」，

這絕對不是您的錯，而是廣告的運作方式。

相關程式碼

以下是使用 Developer Tools 仔細分析過的內容，其中名為 swipegallery_layout.js 的導案負責管理點擊位置等內容。

點擊開始時 (touchstart event)

第 1051 行～第 1061 行

重點如下：

b.time = Date.now(); … 記錄點擊開始時間
b.p = 0 … 記錄點擊開始座標，初始值為 0

由於 Source code 基本上經過了混淆處理，因此僅供參考。

Y.prototype.Ba = function(a) {
    this.V || a.preventDefault();
    if (!this.W && 0 != this.b.length) {
        var b = this.T;
        b.U = !0;
        this.V ? (b.pageX = a.e.touches[0].pageX, b.G = a.e.touches[0].pageX) : (b.pageX = a.e.pageX, b.G = a.e.pageX);
        b.time = Date.now();
        b.A = 0;
        b.p = 0
    }
};

當手指在點擊時移動 (touchmove event)

第 1061 行～第 1089 行

重點如下：

a.preventDefault(); … 這段語句將禁用垂直滾動時的畫面移動
b.p = a.e.touches[0].pageX - b.pageX; … 將初始點擊位置和目前點擊位置的 X 軸座標值相減並代入

Y.prototype.Aa = function(a) {
    if (!this.W && 0 != this.b.length) {
        var b = this.T;
        if (this.V) {
            a.preventDefault();
            if (1 < a.e.touches.length || a.e.scale && 1 !== a.e.scale) return;
            b.p = a.e.touches[0].pageX - b.pageX;
            b.A = a.e.touches[0].pageX - b.G;
            b.G = a.e.touches[0].pageX
        } else {
            if (!b.U) return;
            b.p = a.e.pageX - b.pageX;
            b.A = a.e.pageX - b.G;
            b.G = a.e.pageX
        }
        b.ea = !0;
        var c = this.b[this.d].h();
        this.Ma = 0 > b.p ? 0 : 1;
        a = Math.abs(b.p / this.P);
        var d = !1;
        0 == this.Ma ? ($(c, this.H * a, this.I * a, this.J * a, this.K * a, 0), this.d != this.b.length - 1 ? (c = this.b[this.d + 1].h(),
            $(c, -this.H * (1 - a), -this.I * (1 - a), this.J * (1 - a), this.K * (1 - a), 0)) : d = !0) : ($(c, this.H * -a, this.I * -a, this.J * a, this.K * a, 0), 0 != this.d ? (c = this.b[this.d - 1].h(), $(c, this.H * (1 - a), this.I * (1 - a), this.J * (1 - a), this.K * (1 - a), 0)) : d = !0);
        d && (b.A /= Math.abs(b.A) / this.P + this.La);
        A(this.f.style, Eb(0));
        this.B += b.A;
        A(this.f.style, Fb(this.B, 0, 0))
    }
};

結束點擊時 (touchend event)

第 1090 行～第 1097 行

重點如下：

1
2
3

((50 > Math.abs(b.p))  // 點擊初始位置和結束位置的 X 座標值差小於 50pix
	&& 250 > a - b.time) // 且點擊持續時間小於 250ms
		&& (this.dispatchEvent("tap"), this.dispatchEvent("tap-" + this.d)), // 發生點擊廣告的事件

請注意下方敘述，從第 4 行開始的 b.U && ... 這段程式碼實現了上述功能。

Y.prototype.la = function(a) {
    if (!this.W && 0 != this.b.length) {
        var b = this.T;
        b.U && "mouseout" != a.type && (a = Date.now(), 500 < a - this.ua && (50 > Math.abs(b.p) && 250 > a - b.time) && (this.dispatchEvent("tap"), this.dispatchEvent("tap-" + this.d)), this.ua = a);
        b.U = !1;
        b.ea && (a = this.d, Math.abs(b.p) > this.Na && (0 > b.p ? a = this.d == this.b.length - 1 ? this.d : this.d + 1 : 0 < b.p && (a = 0 == this.d ? this.d : this.d - 1)), this.Q(a), b.ea = !1)
    }
};

換言之，這些操作代表什麼

當使用者誤以為「在滑動螢幕時，手指卻意外觸摸到廣告」，這種所謂的誤觸實際上是經過精心編寫的「設計」。

當偵測到快速的垂直滑動時，會觸發跳轉到廣告頁面，此時畫面呈現靜止狀態，進而讓使用戶以為是自己「誤點擊」所導致。

反之，如果滑動速度較慢，不論垂直或橫向滑動都不會跳轉廣告頁面。

此外，由於圖像會跟著手指移動，即使被禁止滑動也不容易察覺。

誤觸廣告不僅損害使用者體驗，也降低廣告主的品牌價值

每當看到滑動廣告時，最明顯的感受就是，誤觸廣告對使用者並沒有任何好處。不僅損害所在網站的使用者體驗，對於那些被意外點擊的廣告主也不會產生良好印象。

雖然這只是我的猜測，可能存在一些公司利用這種誤觸廣告系統，藉此虛報展示給廣告主看的廣告曝光率。

雖然這次廣告主的產品我也實際使用過，今後也想繼續使用這個品牌，但看到透過這種方式展示廣告真的感覺非常遺憾。

希望廣告主能夠意識到，展示這類型的廣告只會降低品牌價值，並進一步採取相關措施，以確保未來不再出現這種形式的廣告。

從根本上來說，滑動廣告的廣告頁面跳轉絕不是使用者誤觸或程式錯誤造成，而是經過明確設計過的跳頁效果。

我不曉得這是公司的方針或單一工程師想出的壞主意，但比起使用者優先考慮個人利益的態度，同樣作為一名工程師實在令人感到遺憾。

Release Note

2023/08/7

修正錯誤
新增說明

2023/08/08

新增 syntax highlighting 語法高亮效果
- 感謝 @getty104 様

2023/08/10

新增 Release Note
刪除廣告主的名稱
- 滑動廣告是由刊登網站設定所引起，無法確定廣告主是否得知這件事情。因此考慮品牌名聲，在此選擇不公開廣告主的名稱。

15th鐵人賽目錄傳送門：https://ithelp.ithome.com.tw/users/20135558/ironman/6290