Embedded Files
2020/11/5
TCNEWS WP Google Analytics Events
小工具 自訂HTML
<a href="https://tcnews.info/category/publications/" target="_blank" class="sqtcnews" id="10989"><img src="https://tcnews.info/wp-content/uploads/TCNEWS_logo_redsquare.png" alt="TCNEWS" border="0"></a>
<a href="https://issuu.com/tcnews.info" target="_blank" class="sqtcnews" id="10989"><img src="https://tcnews.info/wp-content/uploads/TCNEWS_logo_redsquare.png" alt="TCNEWS" border="0"></a>
下載
<a href="https://tcnews.info/wp-content/plugins/download-attachments/includes/download.php?id=18085" title="vol39" class="attachment-link">vol39</a>
WP Google Analytics Events 設定
1. 確認sidebar (小工具) TEXTELL的首頁BANNER 自訂HTML (有設定專用的class)如下
<a href="https://www.youtube.com/c/textell" target="_blank" class="textellbanner"><img src="https://www.tcfm.fju.edu.tw/1_TCFMIMG/textell_logo.png" alt="TEXTELL" border="0"></a>
2.回到後台 WP Google Analytics Events ，Add New Click Events
Selcector: textellbanner | Select type: class | Event Category: TEXTELL | Action: clickTEXTELL | Label: TEXTELL_Label | Value: 10 Non-Interaction: False。
## 使用id 以及 class 皆可、注意Non-Interaction為 false 。
Selector 需自行填入(查出或設定class後填入)、selector type: class (id待測試)、Event Category, Action, Label, Value (4個GA目標 事件的設定)、Non-Interaction: True。
事件的程式碼
https://awoo.ai/zh-hant/blog/ga-event/
[設定事件的方式]設定事件的方式會因為安裝GA的方式有所不同。以下將會針對「gtag」「analytics.js」「GTM」這三種不同的安裝方式分別介紹到底該要如何安裝。在安裝事件前一定要先確認一下目前網站的安裝方式喔！#重點在於 gtag才會成功出現即時事件(ga的代碼暫無顯示)。
analyitcs.js 基本寫法：ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);在上方有提到的「事件類別、事件動作、事件標籤、事件價值」就是在這裡依序進行填入。以前面提到的導覽列點擊事件來說，填入內容後的程式碼就會是：ga('send', 'event', 'Click', 'Nav Click', '網站分析/GA教學', 500);gtag 基本寫法：gtag('event', <action>, {'event_category': <category>, 'event_label': <label>, 'value': <value> });如果你的網站是最近才透過GA內的追蹤程式碼建議來安裝的，那麼你就需要使用gtag來進行安裝。其中比較不一樣的更改是gtag把「事件動作」提前了，此部分需要稍微注意一下。以前面提到的導覽列點擊事件來說，填入內容後的程式碼就會是：gtag('event', 'Nav Click', { 'event_category': 'Click', 'event_label': '網站分析/GA教學', 'value': 500});
[WORDPRESS 傳統編輯器不勾選取代區塊編輯器，於區塊編輯器中以HTML編輯；傳統編輯器/文字-會自動移除部分程式碼]
#使用區塊編輯器~可新增 區塊>內容>傳統編輯器，然後選 "內容的HTML程式碼，再貼上HTML程式碼(不需<HTML>)，例如
<form action="https://www.youtube.com/"><button type="submit">SubmitContinue</button></form>
此段 區塊可為傳統編輯器，可右邊點切 編輯HTML程式碼，也可點按切回~視覺化編輯(回到傳統編輯器)。
HTML編輯的區段 也可點按"轉為區塊"，會顯示 "這區塊包含未預期或無效的內容"
>>以下皆可觸發事件[使用gtag語法]
<button type="button" onclick="gtag('event', 'playbut1', {
'event_category': 'videobut1',
'event_label': 'playvideobut1',
'value': 500
}); " >我是按鈕button1</button>
<html>
<body>
<form action="https://www.youtube.com/">
<button type="submit" onclick="gtag('event', 'playsubmit', {
'event_category': 'videosubmit',
'event_label': 'playvideosubmit',
'value': 500
}); " >SubmitContinue</button>
</form>
</body>
</html>
<html>
<body>
<form>
<a href="https://www.facebook.com/" target="_blank">
<input type="button" value="ahrefbutton" onclick="gtag('event', 'playahref', {
'event_category': 'videoahref',
'event_label': 'playvideoahref',
'value': 500
}); ">
</a>
</form>
</body>
</html>
<input type="button" value="onclickgtagAlocation" onclick="location.href='https://www.facebook.com/', gtag('event', 'play3', {
'event_category': 'video3',
'event_label': 'playvideo3',
'value': 500
}); ">
<input type="button" value="onclickgtagBnew" onclick="window.open('https://www.facebook.com/', '_blank'), gtag('event', 'play', {
'event_category': 'video',
'event_label': 'playvideo',
'value': 500
}); ">
(此段為最佳解)
:::::::::::::::::::::::[目標轉換的匹配]::::::::::::::::::::::::::
使用 WP Google Events (selector: class=sqtclick)匹配成功，同時使用selectid也可觸發事件。
使用程式碼，再GA目標事件 只填事件類別、事件動作兩項即可 (可能會多等一些時間)。
使用於協作平台：
###
::::::::::::::::::::::::[HTML寫法]::::::::::::::::::::::::::
<input type="button" value="連結名稱" onclick="location.href='https://tcnews.info'">
<button type="button">我是按鈕</button>
<input type="button" value="我也是按鈕">
How to use both onclick and target=“_blank” [點我] onclick="window.open('your_html', '_blank')"
The syntax is:
window.open(strUrl, strWindowName[, strWindowFeatures]);Your code should have:window.open('Prosjektplan.pdf');Your code should be:<p class="downloadBoks"
onclick="window.open('Prosjektplan.pdf')">Prosjektbeskrivelse</p>
::::::::::::::::::::[ga語法]:::::::::::::::::::::::
<input type="button" value="onclickga" onclick="ga('send', 'event', 'video1', 'play1', 'videopolay1');">
<input type="button" value="onclickgasend" onclick="ga('send', { hitType: 'event', eventCategory: 'Videos2', eventAction: 'play2', eventLabel: 'Fall Campaign2'});">
建立用作連結的 HTML 按鈕 https://www.delftstack.com/zh-tw/howto/html/html-button-link/使用 <form> 和 <a> </a> 錨標籤建立一個 HTML 按鈕，其作用類似於連結使用 <form> 和 <button> 標籤建立一個類似於連結的 HTML 按鈕使用 <form> 和 <input> 標籤建立一個類似於連結的 HTML 按鈕
(1)<html><body><form> <a href="https://www.facebook.com/"> <input type="button" value="click here"> </a></form></body></html>
(2)<html><body> <form action="https://www.youtube.com/"> <button type="submit">Continue</button> </form></body></html>
(3)<html><body> <form action="https://google.com"> <input type="submit" value="Go to Google" /> </form></body></html>
(1)<html><body><form> <a href="https://www.facebook.com/"> <input type="button" value="click here"> </a></form></body></html>
(2)<html><body> <form action="https://www.youtube.com/"> <button type="submit">Continue</button> </form></body></html>
(3)<html><body> <form action="https://google.com"> <input type="submit" value="Go to Google" /> </form></body></html>
Page updated
Report abuse