Google Tag Manager 內建變數- HTTP 參照網址(Referrer)

Google Tag Manager 內建變數- HTTP 參照網址(Referrer)

光看字面 Referrer HTTP 參照網址不知道是什麼碗糕，
其實這個變數是紀錄該頁面的"來源參考頁面"，
內部其實是包javascript   document.referrer。

例如 ：

從Google搜尋引擎 連結到這一頁的話，
Refferrer 將會是 https://www.google.com.tw/

從Facebook 連結到這一頁的話，
Refferrer 將會是 https://www.facebook.com/


從Bing 搜尋引擎 到這一頁的話，
Refferrer 將會是 https://www.bing.com/

又如：
假設 在 A.html 網頁有選單有個超連結選項 B.html， 當點選 B.html 進入B.html 時
B頁面的 referrer就會是 A.html


但有 Refererer 是空字串，所以似乎不能依賴這個值來判斷所有來源，
例如在我自已的blog連結到測試GTM的頁面時就是空值....

 Ruby's Louvre 的文章 有提到一些可能會讓referrer為空的原因。


我們可以透過Debug視窗來查看這個值

Google Tag Manager 變數類別 - 對照表( Lookup Table )

Google Tag Manager 變數類別 - 對照表(Lookup Table)

對照表( Lookup Table )

類似程式語法的 Switch case，
依輸入的條件值來準定輸出什麼值

例如：
Google Tag Manager在進行Debug模式時所觸發的GA可紀錄在另一個測試GA帳戶中，
避免因為Debug測試的資料影響GA的分析。

以下為設定方式：

Virable type: Lookup Table
Input Variable: {{Debug Mode}}
        (Debug Mode 是GTM的內建變數)
Lookup Table:
       true 時 GA-測試ID
       false 時 GA-正式ID

Google Tag Manager 紀錄HTML元素進入可視區域資訊

Google Tag Manager 紀錄HTML元素進入可視區域資訊

要紀錄當HTML 特定元素進到瀏灠器可視範圍時，可透過Element Visibility 這個trigger來解決，以下為Google Tag Manager 相關設定範例，目標是抓紀錄網頁中有title屬性的元素，並將該屬性的值紀錄下來：

建立Trigger：
Trigger Type： Element Visibility
Selection Method： CSS Selector
Element Selector：[title]:not([title=''])
           這裡的意思是抓取title屬性有值有的元素
When to fire this trigger： Once per element
           每個符合條件的元素進入可視範圍都會觸發，觸發一次後再次進入可視區不再觸發
Minimum Percent Visible：50 percent
           當元素大小有50%進入可視區才觸發

啟用內建變數： Click Element, Percent Visible, On-Screen Duration

自定變數：

     GA-ID ：Google Analystic 的追蹤ID

     Get-Element-Attribute-Title ：取得title屬性值

建立Tag：
Tag type： Universal Analystics(GA)
Track Type：Event
Category：可自行命名分類
Action：{{Page Path}}
Label：{{Get-Element-Attribute-Title}}
勾選 Enable overriding settings in this tag
Tracking ID： {{GA-ID}}

Trigger：選擇前面所建立的Trigger (元件進入可視區域)

Google Tag Manager 垂直捲動深度瀏灠追蹤

Google Tag Manager 垂直捲動深度瀏灠追蹤

當使用者瀏灠目標網頁時，如果要得知該次瀏灠到使用者在頁面看了多少比例？有這個資訊後可以用來檢討是不是網頁排版不夠吸引用戶，適時調整呈現頁面順序。

如何在 Google Tag Manager 設定以垂直捲動深度瀏灠追蹤為例：

建立Trigger：在Workspace的清單中點選 Trigger --> New：

 選擇Trigger Type 為 Scroll Depth：

為了後續容易辨識，設定Trigger名稱為 Scroll Depth Trigger，
Trigger的設定如下：

• Vertical Scroll Depths追踨垂直深度捲動
• 設定依頁面的"百分比"： 10,25,50,75,100 (請自行決定要紀錄的間隔)
• 設定 All Pages 會對網站的所有有埋Google Tag Manager程式碼的網頁中捲動事件做紀錄，如果要針特特定網頁可選 Some Pages，使用條件來設定要紀錄哪些網頁

完成後就 SAVE 存檔吧

再來我們須要用變數來接 捲動Trigger 所取得的資訊

點選 Variables -> Built-in Varibles -> Configure
跳出內建變數視窗後找到 Scrolling，將Scroll Depth Threshold, Scroll Depth Unit, Scroll Direction 都勾選。

因為我們要透過 Tag Manager 來把資訊紀錄到 GA (Google Analytics)，方便以後不用每次都要手輸GA 的追蹤ID，所以這邊自已定義一個使用者變數，變數類別(Variable type) 選 常數(Constant)，值的部份就填入目標網站的 GA 追蹤ID

Variables -> User-Defined Variables -> New

再來建立一個Tag，將資訊紀錄到 GA (Google Analytics )服務中：
Tag -> New

選擇 Tag Type 為 Universal Analytics (通用 GA)

為了方便辨識，把Tag命名為 Scroll Depth Tag

GA的設定如下：

• Trace Type 追蹤類型 選 Event (事件)
• Category  類別： Scroll Depth (可以自已定義在GA上要呈現的類別名稱
• Action 動作：{{Page Path }}  網頁路徑 (透過右邊的按鈕選取變數進來)
• Label 標籤： {{Scroll Depth Threshold}}   (透過右邊的按鈕選取變數進來)
• Enable overriding settings in ths tag：勾選  
• Tracking ID： {{GA Trace ID}}  (這是之前我們自訂定的GA追蹤ID 變數
• Trigger： Scroll Depth Trigger

存檔後點選Perview預覽

工作區會出現以下資訊
意思是已經啟用Debug功能，可以瀏灠目標網頁，下方會出現Debug視窗，
請注意，如果設定有修改的話要點選 Refresh

看一下瀏灠目標網頁，的確有出現 Debug 視窗，Scroll Depth Tag 有被觸發了4次

確認沒問題後就 Submit 進行 Publish吧！

這邊須要知道一點，如果使用者已經捲到最下面，然後點選重新整理頁面，因為重整後頁面會直接跳到最下面，所以也會觸發紀錄所有捲動百分比，這樣會造成分析上的困擾，要避免這個情形的話可參考 Scroll-Depth-Trigger-Google-Tag-Manager 有解決方案

參考資料：

Scroll-Depth-Trigger-Google-Tag-Manager

C# 語系對應表

System.Globalization.CultureInfo.CurrentCulture.Name 各語系的對應值：

af-ZA	Afrikaans - South Africa
sq-AL	Albanian - Albania
ar-DZ	Arabic - Algeria
ar-BH	Arabic - Bahrain
ar-EG	Arabic - Egypt
ar-IQ	Arabic - Iraq
ar-JO	Arabic - Jordan
ar-KW	Arabic - Kuwait
ar-LB	Arabic - Lebanon
ar-LY	Arabic - Libya
ar-MA	Arabic - Morocco
ar-OM	Arabic - Oman
ar-QA	Arabic - Qatar
ar-SA	Arabic - Saudi Arabia
ar-SY	Arabic - Syria
ar-TN	Arabic - Tunisia
ar-AE	Arabic - United Arab Emirates
ar-YE	Arabic - Yemen
hy-AM	Armenian - Armenia
Cy-az-AZ	Azeri (Cyrillic) - Azerbaijan
Lt-az-AZ	Azeri (Latin) - Azerbaijan
eu-ES	Basque - Basque
be-BY	Belarusian - Belarus
bg-BG	Bulgarian - Bulgaria
ca-ES	Catalan - Catalan
zh-CN	Chinese - China
zh-HK	Chinese - Hong Kong SAR
zh-MO	Chinese - Macau SAR
zh-SG	Chinese - Singapore
zh-TW	Chinese - Taiwan
zh-CHS	Chinese (Simplified)
zh-CHT	Chinese (Traditional)
hr-HR	Croatian - Croatia
cs-CZ	Czech - Czech Republic
da-DK	Danish - Denmark
div-MV	Dhivehi - Maldives
nl-BE	Dutch - Belgium
nl-NL	Dutch - The Netherlands
en-AU	English - Australia
en-BZ	English - Belize
en-CA	English - Canada
en-CB	English - Caribbean
en-IE	English - Ireland
en-JM	English - Jamaica
en-NZ	English - New Zealand
en-PH	English - Philippines
en-ZA	English - South Africa
en-TT	English - Trinidad and Tobago
en-GB	English - United Kingdom
en-US	English - United States
en-ZW	English - Zimbabwe
et-EE	Estonian - Estonia
fo-FO	Faroese - Faroe Islands
fa-IR	Farsi - Iran
fi-FI	Finnish - Finland
fr-BE	French - Belgium
fr-CA	French - Canada
fr-FR	French - France
fr-LU	French - Luxembourg
fr-MC	French - Monaco
fr-CH	French - Switzerland
gl-ES	Galician - Galician
ka-GE	Georgian - Georgia
de-AT	German - Austria
de-DE	German - Germany
de-LI	German - Liechtenstein
de-LU	German - Luxembourg
de-CH	German - Switzerland
el-GR	Greek - Greece
gu-IN	Gujarati - India
he-IL	Hebrew - Israel
hi-IN	Hindi - India
hu-HU	Hungarian - Hungary
is-IS	Icelandic - Iceland
id-ID	Indonesian - Indonesia
it-IT	Italian - Italy
it-CH	Italian - Switzerland
ja-JP	Japanese - Japan
kn-IN	Kannada - India
kk-KZ	Kazakh - Kazakhstan
kok-IN	Konkani - India
ko-KR	Korean - Korea
ky-KZ	Kyrgyz - Kazakhstan
lv-LV	Latvian - Latvia
lt-LT	Lithuanian - Lithuania
mk-MK	Macedonian (FYROM)
ms-BN	Malay - Brunei
ms-MY	Malay - Malaysia
mr-IN	Marathi - India
mn-MN	Mongolian - Mongolia
nb-NO	Norwegian (Bokmål) - Norway
nn-NO	Norwegian (Nynorsk) - Norway
pl-PL	Polish - Poland
pt-BR	Portuguese - Brazil
pt-PT	Portuguese - Portugal
pa-IN	Punjabi - India
ro-RO	Romanian - Romania
ru-RU	Russian - Russia
sa-IN	Sanskrit - India
Cy-sr-SP	Serbian (Cyrillic) - Serbia
Lt-sr-SP	Serbian (Latin) - Serbia
sk-SK	Slovak - Slovakia
sl-SI	Slovenian - Slovenia
es-AR	Spanish - Argentina
es-BO	Spanish - Bolivia
es-CL	Spanish - Chile
es-CO	Spanish - Colombia
es-CR	Spanish - Costa Rica
es-DO	Spanish - Dominican Republic
es-EC	Spanish - Ecuador
es-SV	Spanish - El Salvador
es-GT	Spanish - Guatemala
es-HN	Spanish - Honduras
es-MX	Spanish - Mexico
es-NI	Spanish - Nicaragua
es-PA	Spanish - Panama
es-PY	Spanish - Paraguay
es-PE	Spanish - Peru
es-PR	Spanish - Puerto Rico
es-ES	Spanish - Spain
es-UY	Spanish - Uruguay
es-VE	Spanish - Venezuela
sw-KE	Swahili - Kenya
sv-FI	Swedish - Finland
sv-SE	Swedish - Sweden
syr-SY	Syriac - Syria
ta-IN	Tamil - India
tt-RU	Tatar - Russia
te-IN	Telugu - India
th-TH	Thai - Thailand
tr-TR	Turkish - Turkey
uk-UA	Ukrainian - Ukraine
ur-PK	Urdu - Pakistan
Cy-uz-UZ	Uzbek (Cyrillic) - Uzbekistan
Lt-uz-UZ	Uzbek (Latin) - Uzbekistan
vi-VN	Vietnamese - Vietnam

Google Tag Manager 追蹤鏈結點選事件

Google Tag Manager 追蹤鏈結點選事件

簡單的紀錄 Trigger, Tag 的設定，請直接參考圖示設定值

其中：

Enable .... When 是想要監聽的目標網頁中的鏈結事件 所以通常是使用 Page_URL這個變數來進行條件判斷。

Fire On 是用來註冊何時觸發鏈結點選事件。

這邊列出比較常用的設定：

一般鏈結點選事件 ：

Enable When: Page URL / matches regex / .*

Fire On: All Clicks

外部鏈結點選事件 ：

Enable When: Page URL / matches regex / .*

Fire On: Click URL / does not contain / 當前網站的Domain Name

社交網站鏈結點選事件 ：

Fire On: Click URL / matches regex (ignore case) / (facebook|twitter|youtube|spotify)\.com

mailto 鏈結點選事件 ：

Enable When: Page URL / matches regex / .*

Fire On: Click URL / begins with / mailto:

下圖示為一般鏈結點選事件設定的範例

參考連結：

Google Tag Manager Help

Re: Click URL does not match RegEx doesn't seem to be working?

RDLC 無法建立資料集 'xxxx' 的資料讀取器

很少使用RDLC，最近開發測試時跑出錯誤，紀錄一下供以後遇到想同問題時可查詢

錯誤訊息：

{Microsoft.Reporting.WebForms.LocalProcessingException: 處理本機報表時發生錯誤。 ---> Microsoft.ReportingServices.ReportProcessing.ProcessingAbortedException: 處理報表時發生錯誤。 ---> Microsoft.ReportingServices.ReportProcessing.ReportProcessingException: 無法建立資料集 'DataSet1' 的資料讀取器。


ReportDataSource的第一個參數得傳入DataSet1才是正確的


ReportViewer1.LocalReport.ReportPath = Server.MapPath("./Reports/xxxx.rdlc");
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(new           Microsoft.Reporting.WebForms.ReportDataSource("DataSet1", dt));

HTML Cach機制

這篇文章對HTML Cach機制解釋的很清楚

http://blog.techbridge.cc/2017/06/17/cache-introduction/

Visual Studio 使用InstallShield 建置找不到Prerequest資源

Visual Studio 使用InstallShield 建置找不到Prerequest資源

最近開啟舊專案進行維護，
使用InstallShield重新建置安裝檔時報錯...

例如：

-1007: Cannot copy source 'C:\Program Files (x86)\InstallShield\2015LE\SetupPrerequisites\Windows Installer\3.1\x86\WindowsInstaller-KB893803-v2-x86.exe' to ..

因為舊專案之前是在另一台電腦開發的，
現在換新電腦，所以Prerequest的資源必須重新下載，
操作方式如下：

參考資料：
https://stackoverflow.com/a/13473130

Chrome Dev tools 小技巧(1)

Chrome Dev tools 小技巧(1)

在Chrome Dev Tools開啟的狀態下在 重新載入頁面 的按鈕鼠左鍵長按後會出現以下選項：

(1)正常重新載入( Normal Reload)：
     這和按 F5 重新整理頁面是相同的功能
     會使用Cache的頁面，僅可能不去下載已經Cache的資料( Javascript, image...等)

(2)強制重新載入(Hard Reload)：
     不使用該頁的Cache資料，強迫重新重新下載所有資料

(3)清除快取並強制重新載入(Empty Cache and Hard Reload)：
     會清空所有cache資料，
     例如有的網頁會透過script去下載其他的資源，這裡也會一併都清除。

節奏練習--Nubia

節奏練習--Nubia

Nubia 是位於埃及南部與蘇丹北部之間沿著尼羅河沿岸的地區。

這是該地區使用的節奏型態，有興趣的可以練習看看~

1-+-2-+-3-+-4-+-5-+-6-+-7-+-8-+-| 拍子
D---K---t-k-D---t-k-K---K---t-k-| 基本句型

D-t-K-t-t-k-D-t-t-k-K-t-K-t-t-k-| A 句
r-l-r-l-r-l-r-l-r-l-r-l-r-l-r-l-| 手法

D-t-S-| B 句
r-r-l-| 手法

D-t-K-| C 句
r-r-r-| 手法

D-tkK-| D 句
r-rlr-| 手法

練習方法：
(1)口唱 基本句型，一直循環
(2)每3次循環後換另一句
(3)句子的順序為：A --> B --> A --> C --> A --> D

Blogger文章嵌入存在Google雲端的PDF文件的方式

在Google雲端硬碟中選取要分享的PDF-->滑鼠右鍵-->共用

共用選項選擇 知道連結的人均可以檢視，然後有二種方式：

(1)人性化方法：

     點選視窗右上角的三個點點處 >  在新視窗中開啟

     

         在新開啟的視窗中點選視窗右上角的三個點點處 > 嵌入項目

      複製HTML語法

(2)土法煉鋼方法：把連結複製起來

                            複製的連結長這樣：
 https://drive.google.com/file/d/0B3NYw2d0wSRQUEhneS1NY0JoUjA/view?usp=sharing
把view?usp=sharing 改為 preview

https://drive.google.com/file/d/0B3NYw2d0wSRQUEhneS1NY0JoUjA/preview



最後一步

嵌入語法如下 --寬(width)、高(height)請再依需求調整：

<iframe src="https://drive.google.com/file/d/0B3NYw2d0wSRQUEhneS1NY0JoUjA/preview" width="100%" height="600px" ></iframe>

 在文章編輯頁面的HTML編輯區塊中把這段語法放上去就可以囉！

[免費鼓譜]秦王破陣樂--打擊分部譜

秦王破陣樂--打擊樂分部譜整理

最近國樂團要練 秦王破陣樂 顧冠仁作曲 打擊有六個聲部，拿到的譜是三個聲部集結為一份總譜， 一份譜十幾頁…這樣合奏時會來不及翻譜...
所以使用 MuseScore 整理了一下。 變成六個聲部一份總譜方便看打擊部的全貌。 另外也把六個聲部分譜獨立出來， 這樣各自負責的聲部只要2~3頁，方便多了！
整理後的PDF檔如下，分享給有須要的人：

以C#實作Google Authenticator 產生一次性驗證碼

以C#實作Google Authenticator 產生一次性驗證碼

之前寫了自動登入到合作夥伴公司的B2B平台網站抓取每日報表，
該平台原本是透過圖形驗證碼的方式來阻擋爬蟲，但其選擇圖形其實是很單純，
難易度太低，有心人要解開其實是很簡單的，
後來該平台應該有意識到這個問題，最近更新為使用Google Authenticator的一次性密碼驗證碼TOPT ( Time-based One-time Password ) 進行二階段驗證

1.先下載Google Authenticator app：Android, iOS

2.使用該 app 掃瞄讀取B2B平台所提供的QRCode後便會新增一個自動產生一次性驗證碼的項目，驗證碼每30秒就會變動一次

不得不說這的確是增強了網站登入的防護，要給予掌聲鼓勵！

但這種方式對良善之心要運用自動登入的老百姓該怎麼辦？
難道要回到原始時代人工作業嗎？

想來想去，心有不甘！
走~！想解決方案去！！！

解決方案一：

即然我們可以看到這個驗證碼，那只要在VM 虛擬機器上掛個Android系統
再安裝Google Authenticator 來產生驗登碼，
寫個程式自動擷取該視窗驗證碼的畫面後進行OCR辦識，這樣就解決了。
這是我一開始的想法，後來也實作出來了(擷取視窗驗證碼的方式之後再寫另一篇)。

這樣的缺點是：
1.擷取畫面時如果該視窗突然被其他視窗蓋到就會失敗
2.須安裝VM，而且要一直開著…有點浪費系統資源

有沒有方式可以解決浪費資源這點呢？後來想說會不會Chrome有相關外掛呢？
這樣就能在要執行時再開啟Browser進行截取就好了
google了一下還真有耶!

但這個網站外掛並不是google所開發的，為什麼他產生的也可以適用？
這代表演算法一定是有公開
(Google Authenticator 也是程式碼開源的，有興趣可以到GitHub Google Authenticator參考 )
所以接下來就生出了更好的解決方案了：

解決方案二：

直接實作演算法(我是參考Tin Isles的javascript實作改用c#東抄西抄來實現而已...
只要有了金鑰，透過演算法就可以得出一次性碼囉~
那金鑰哪來？其實上面所說的QRCode只是一個紀錄私密金鑰的載體而已：

程式碼參考如下：

參考資料：

• Google Authenticator One-time Password Algorithm in Javascript
• Wiki Google Authenticator 
• .NET library HMACSHA1

Debug Android中的網頁

Debug Android中的網頁

在桌機上開發網頁時透過Chrome的開發人員工具可以很方便的進行除錯
當該網頁在特定手持裝置上跑時又該怎麼在該裝置下除錯呢？
我們可以使用 Chrome 的 inspect工具來達到這個需求。
該工具也可用在 Cordova 所開發的app中對 webview 進行Debug
前置條件：

• Android 4.4 以上
• Chrome 30 以上

1) 手機開啟 USB Debug功能：
    a) 啟用開發人員模式
        設定 --> 關於 --> 版本號碼  連點 7 次 該選項

        完成後在設定中會開發人員選項

    b) 啟用 USB 偵錯

2) 將手機接上USB後開啟桌機上的Chrome瀏灠器，
   在網址列上輸入： chrome://inspect
   可以在 Remote Target 上看到目前有連上的裝置

3) 開啟手機中的 Chrome 瀏灠器，開啟任網頁來測試
   ( 這邊以 www.pchome.com.tw 為例 )
    可以看到在桌機上的 chrome inspect 工具上出現我們在手機檢視的網頁項目

4) 點選 inspect 會開啟開發者工具來進行Debug
值得注意的是，左邊的畫面會和手機上的網頁同步，我們也可以直接在上面進行操作

如果使用Cordova開發App的話，也可以用相同方式來進行Debug

使用Ionic framework開發手機程式簡易範例

Ionic framework開發手機程式簡易範例

這是ionic framework在Windows 7作業系統下建置Android手機app的範例

1) 先安裝NodeJS
2) 開啟命令列視窗後輸入： npm install -g ionic cordova
3) 建立專案： ionic start MyFirstIonic



接下來會問你是要用什麼範本建立這個專案( ex. tabs, blank, sidemenu....)，用鍵盤上下鍵來選擇範本，這邊就選tabs吧



專案建立好後會詢問是否把該專案加入Ionic的儀表板(dashboard),這些填 N 就好

4) 切換到專案目錄 cd MyFirstIonic
5) 我們可以用瀏灠器來測試專案： ionic serve



執行該指令後會自動開啟瀏灠器，若沒有自動開啟可自行於瀏灠器輸入http://localhost:8100
要結束server運行的話，該命令視窗以ctrl + C 便可結束



6) 要建置Android app須在電腦上安Android SDK或是安裝Android Studio
可參考Cordova Android Platform Guide：
說明如下：

a) 安裝 Java JDK 8以上
b) 設定環境變數 JAVA_HOME


c) 安裝 Android Studio 來取Android SDK
d) 依所要建置的 Android 目標版本下載並新增SDK Package

開啟Android Studio --> Tools --> SDK Manager --> SDK Platforms 勾選要安裝的版本





e) 設定環境變數 ANDROID_HOME 並且將 android SDK路徑下的 tools/bin、 plateform-tools 加至PATH中




7) 執行 ionic cordova platform add android



8) 檢查ionic建置android 是否符合要求： ionic cordova requirements



9) 開始建置 ionic cordova build android
10) 建置完成後會產生android-debug.apk，這個 apk 就可以傳到手機上安裝了





11) 也可用adb(android debug bridge)的方法來建置佈署，手機以USB連接後先在命令列上下 adb devices 確認裝置是否已備妥

接著下 ionic cordova run android，直接建置後會安裝到手機上(記得先將手機設定為開發人員模式



相關連結：

• ironic framework docs
• Cordova Android Platform Guide