How to disable GTM debug mode

Google Tag Manager (GTM) 提供了很多方便收集使用者行為的工具,但前端會出現如下圖的除錯小工具視窗,方便我們開啟除錯及預覽模式,但當我們測試完成後將網站投入於生產環境中,發現還是會出現這小工具視窗,即使關閉了,當刷新頁面後仍會出現,似乎關閉不了它,本篇就來處理這傢伙,教您如何關閉 Google Tag Manager (GTM) 除錯工具的小工具視窗。

開啟代碼管理工具面版 (GTM)

  • 取消勾選左下角 Include debug signal in the URL 核選方塊
  • 按 Popup 視窗右上角的叉叉關閉視窗

停止除錯模式

做到這一步基本上已經關閉了除錯模式了,這時可以到網頁上去看一下GTM除錯工具的小工具視窗是否還在,如果還在,就按下小工具視窗的右上角的叉叉,關閉這個視窗,它就不會出現囉。

參考資料:
https://support.google.com/tagmanager/answer/6107056?hl=zh-Hant
https://www.analyticsmania.com/post/4-ways-how-to-turn-off-google-tag-manager-debug-mode/

[……]

閱讀更多

設定 G Suite Email MX 記錄

申請完 G Suite 並在管理面版設定好網域,卻還不能發信,請檢查你的DNS紀錄是不是少了MX的紀錄了呢?Google G Suite 要設定五筆MX紀錄,email才能正常運作:

新增 G Suite MX 記錄

名稱/主機/別名存留時間 (TTL*)記錄類型優先順序值/回應/目的位置@ 或保留空白3600MX1ASPMX.L.GOOGLE.COM@ 或保留空白3600MX5ALT1.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX5ALT2.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX10ALT3.ASPMX.L.GOOGLE.COM@ 或保留空白3600MX10ALT4.ASPMX.L.GOOGLE.COMhttps://support.google.com/a/answer/140034?hl=zh-Hant

設定DNS紀錄

如果你DNS是代管在 Cloudflare 上的話只要按照下列幾個步驟就可以成功設定了

[……]

閱讀更多

【黑暗料理界】常用軟體或網站改為深色模式 (持續更新)

為什麼要用黑色呢,基於下面幾點理由,我愛把所有介面改為黑色介面

  • 我爽,沒別的
  • 顧眼睛
  • 省電

顧眼睛

除了第一點以外,是我個人因素外,長時間的使用電腦的朋友都該使用暗黑模式,因為暗黑模式能減少強光對眼睛的傷害,所有我們螢幕看到的顏色都是由三原色光紅色、綠色、藍色三種色光混合而成,尤其是白色,就是紅、綠、藍三種光線累加而成,而黑色正好相反,沒有光線就是黑色。

長期光線照射眼睛會造成眼睛傷害,反之,減少光線的照射能降低長時間使用電腦對眼睛的危害。

省電

不要覺得我在唬爛,暗黑模式也能省電,筆電或手機最消耗電力的就是顯示器,光是需要電力轉換,顯示器顯示光線的原理也是同一上段使用紅、綠、藍三種光線累加混合而成,黑色則為不發光,所以暗黑模式則會減少光的輸出,也就會減少電力消耗,增加續航力。

開始越來越多軟體介面或網頁介面開始支援暗黑介面,只是每一個軟體或服務的暗黑模式名稱略有不同,有的叫深色模式、有的叫夜間模式、黑暗、深色,都一樣就是把解面變成黑嚕嚕就對了,本篇就來教大家怎麼把一些常用的軟體或網路服務改成黑嚕嚕模式

Windows 10 深色模式

win 10 也加入暗黑模式的支援,可以讓視窗跟一些兼容Windows佈景主題的應用程式都變成暗黑模式

Chrome 深色模式

依照官方文件說明,Windows 10 以上版本只要跟上一段介紹的佈景主題設定為「深色」即可,必要時重新開啟 Chrome 瀏覽器

官方文件:使用深色模式或深色主題瀏覽
https://support.google.com/chrome/answer/9275525?co=GENIE.Platform%3DDesktop&hl=zh-Hant

還想更黑一點嗎?

Chrome 極致黑

https://agirls.aotter.net/post/56218

Edge 深色模式

Firefox 深色模式

最早預設就是黑色的瀏覽器,但有可能手賤設定跑掉了,可以看這邊設定回來

Facebook 深色模式

facebook 需要先切換至新版本才能啟用深色模式,右上角三角形典下去,選取夜間模式

Line 深色模式

Youtube 深色模式

Gmail 深色模式

美中不足,那撰寫按鈕是怎樣,太不合群了吧

Twitter 推特深色模式

XMind 2020 深色模式

SourceTree 深色模式

工具 > 選項 > Theme > Dark

Android Studio 深色模式

Configure > Settings
Appearance & Behavior > Appearance > Theme > High contrast

[……]

閱讀更多

HTML5 a tag force download

希望強制讓使用者下載檔案,但是在a標籤將網址指向檔案,在一些常用檔案例如:jpg、png、PDF,常會被瀏覽器直接開啟,無法直接下載,比較正規的做法是在發送 headers 時做這件事,但有時我們在處理靜態網頁就可以用偷吃步,在HTML5 a 標籤中多了一個download屬性,就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案,但這偷吃步要小心瀏覽器相容性

點我看效果 download PNG

[……]

閱讀更多

PHP 上傳檔案,自訂錯誤訊息,當超過php.ini post_max_size 限制時

PHP上傳檔案會受限於 php.ini post_max_size 的值,這非常合理,但在程式中檔案上傳超過 post_max_size 時會直接中斷檔案上傳動作,吐出一個Warning 

在正式環境中,通常會關閉錯誤報告,程式中試著用 $_POST and $_FILES 找上傳檔案超出 post_max_size 的線索,皆回傳空值,如此一來程式很難判斷發生了怎麼一回事,沒辦法回應使用者目前情況,影響使用者體驗

透過以下代碼,可以透過PHP判斷上傳檔案超出 post_max_size 的錯誤,以便在輸出的頁面告訴使用者發生什麼事,當然也可以修改它,做需要的錯誤處裡

[……]

閱讀更多

NTP Server Taiwan 網路時間協定伺服器

台灣國家時間與頻率標準實驗室 – NTP Server

參考:http://ww.stdtime.gov.tw/Time/ntp/resource.htm

Google – NTP Server

參考:https://developers.google.com/time/

Apple – NTP Server

微軟Microsoft – NTP Server

Facebook – NTP Server

參考:https://engineering.fb.com/production-engineering/ntp-service/

[……]

閱讀更多

綠界金流開發及測試環境

開發後台入口:

https://vendor-stage.ecpay.com.tw/User/LogOn_Step1

測試帳戶資訊

測試帳號 stagetest1234 測試密碼 test1234 測試統編 53538851

系統介接資訊

商店代號2000132

服務名稱介接 HashKey介接 HashIV金流、MPOS5294y06JbISpM5x9v77hoKGq4kWxNNIS電子發票ejCk326UnaZWKisgq9jcZX8Ib9LM8wYk物流5294y06JbISpM5x9v77hoKGq4kWxNNIS[……]

閱讀更多

JavaScript options object merge

這很有用喔,JavaScript 把零散程式封裝成插件時,會傳入物件相關選項 options,使封裝的程式因為選項 options 的屬性值不同而能實體化出更多可能。

建立封裝程式的選項 options 物件

為維持程式正常運行,通常都會建立一個預設值物件,在實體化的時候傳入一個選項 options 物件 ,與預設選項物件合併,後者覆蓋前者,以下為範例程式:

_default 為預設物件

options 為傳入物件

_options 為合併後物件

output:

options merge

如果兩個對象都有一個具有相同名稱的屬性,則第二個對象屬性將覆蓋第一個對象。

ES6在2015年引入了spread運算符【…】,這是將兩個簡單對象合併為一個的完美方法:

output:

參考資料:

https://stackoverflow.com/a/171256/6784662

[……]

閱讀更多