認同請分享之分享按鈕 + 圖片 + GA 事件追蹤等真人真事操作紀錄




用LINE傳送
對惹... 不好意思只有行動裝置可以用 LINE 分享喔.. ^^" (若是用桌機或筆電會被帶走.. ~"~) 認同請分享之分享圖片安裝實例

說到認同請分享之分享按鈕 + 圖片 + GA 事件追蹤..

這陣子相當有幸在幾次 SEO 相關技術分享時,都提到了對網站 SEO 來說社交訊號是相當相當重要。且對我們網站管理員來說,除了要盡可能讓網頁內容對訪客能夠更有用、更能夠產生共鳴外,網頁上也試著配置更多且容易促進分享的按鈕或方式,如此一來也才能夠雙管齊下地讓文章被分享的可能最大化。

但講歸講,突然想到 ga.awoo.com.tw上似乎也沒什麼特別容易分享的按鈕或管道.. orz

所以今天,索性就將一些安裝分享按鈕 + 圖片以及安裝 Google Analytics 事件追蹤碼的真人真事案例整理於這篇文章中。就希望可以幫助大家參考這篇文章的必要流程後,再試著加入不同的元素或表達方式,且安裝完成後還可以回到自己 Google Analytics 查看是否真的有效或還有沒有改善的空間吧。

題外話:

但說回被分享的價值,除了我們在 “第一次當數據總.. 裁就上手,寫在 iSearch 2016 前一天” 這篇文章的最後,有稍微提到一些較容易被分享的建議做法外。其實也可以回頭看看這一個禮拜(2015/1/18~1/22),發生什麼讓大家突然都津津樂道的事就可以略知三四了。

萌小編
像是除了我們萌小編貼心報路外,最威的應該就是我們的薯束了吧.. ^^”

(為了避免瀏覽文章的心情與思緒被打斷,這篇文章中若如上方有出現超連結,或許也可以先按著 Ctrl(或 ⌘ Command) 鍵再點選該連結。如此就可以先默默另開視窗,等待會有空或真的有需要時再到另一個頁籤查看喔!!)



想要促進訪客認同請分享也請先放上分享按鈕(或圖片)

先假設現在我們每一篇文章都真的能引起某一族群朋友的共鳴好了,但是當這些朋友共鳴產生時,下一個動作可能不一定會想到要分享或是只是單純在心中吶喊與暗自認同,又可能是其實已經產生想分享的動機了,但因為又懶得複製網址後貼到自己塗鴉牆上故作罷..

那這個時候,若能在文章結束後面放上一個顯而易見的分享按鈕(圖片)如下圖,相信就很有機會成為讓駱駝起飛的稻草喔!!!!

認同請分享真人真事案例

所以,接下來就我們來參考以下簡單的前置作業吧。
(以下 html code 為了便於閱讀有先斷行,但實際在操作時就不一定要斷喔.. ^^”)

一、複製以下 facebook 分享連結的 html 語法

<a
href="http://www.facebook.com/share.php?u=打算要分享的網址">
</a>



二、為這個連結找一張可以相互應並會讓人比較想分享的圖片,並將圖片上傳至 FTP 或某空間以產生網址。然後就只要將圖片放入第一步的連結語法就完成了如以下範例。

<a
href="http://www.facebook.com/share.php?u=打算分享的網址">
<img src="某張圖片網址">
</a>
題外話:
以上是用某張圖片當分享按鈕如以下某網站首頁的分享圖。但當然,也可以將圖片的 <img> 標籤改成純文字。就像是若要用純文字分享我們 ga.awoo.com.tw 首頁就只要按照以下修改即可。

<a
href="http://www.facebook.com/share.php?u=打算分享的網址">
拜託大家高抬貴手分分享啊啊啊~~~
</a>

然後在網頁上就會是:拜託大家高抬貴手分分享啊啊啊~~~
(下圖為某網站分享按鈕 + 圖片實際案例..)

喝不完的台北咖啡館,才是臺灣最美的風景___triplew_tw

接著就是幫這張認同請分享的圖片加上 GA 事件追蹤碼

在上一步中已經可以在網頁上放上一張具有分享功能的圖片,點擊後就會出現以下畫面。

點擊分享按鈕後的畫面

不過現在我們還打算用 Google Analytics 事件追蹤碼來追蹤、紀錄這張分享圖片到底被點擊了幾次時,就可以參考以下 html 範例,在 <a> 連結標籤中加入 Google Analytics 事件 Javascript 碼:ga(‘send’, ‘event’, ‘事件目錄’, ‘事件動作’, ‘事件標籤’);

(不過以下因為這是 Javascript 所以放在 html 時還要加上 onclick..)。

<a
onclick="ga('send', 'event', '事件目錄', '事件動作', '事件標籤');"
target="_blank"
href="http://www.facebook.com/share.php?u=打算分享的網址">
<img src="某張圖片網址">
</a>
題外話:

有關為某連結加上 GA 事件追蹤碼,其實我們在 “站外連結點擊數追蹤事件設定,快速在後台編輯器完成版” 這篇文章中也有提到一完整的介紹。且該篇文章還是以 WordPress 這架站平台的後台(如下圖)來介紹,故就可以依照各自需求與習慣參考參考參考參考參考..


至於有關 Javascript 與 html 的搭配相關說明,我們之前在 “到底 LINE 不 LINE 事件簿最終回 – 原來兇手就是..” 也曾進行介紹。

Wordpress 後台操作實景

在今天的認同請分享之分享按鈕 + 圖片 + GA 事件追蹤之後…

以上範例主要是單獨針對單一頁面網址分享時所可以參考的文章與資訊,但更多人會需要的,應該還是可進一步追蹤網站中每一篇文章中的每一個分享按鈕的點擊狀況。

而這時其實也只要將上述提到的單一網址,改為因應不同頁面的動態網址即可。像是若想要了解 php 網站中不同最終結果頁面上分享按鈕被點擊的狀況,只要將網址改為以下 php 判斷式就可以了喔。

<?php print(urlencode(get_permalink())); ?>



若再加上一些 title 或圖片 alt 等對網站 SEO 有幫助的元素時,最後就會像是以下這範例。

<a
onclick="ga('send', 'social', '事件目錄', '事件動作', '事件標籤');"
target="_blank"
href="http://www.facebook.com/share.php?u=<?php print(urlencode(get_permalink())); ?>&title=<?php print(urlencode(the_title())); ?>"
title="連結title">
<img
src="圖片網址"
alt="圖片alt!" 
title="圖片title">
</a>



且若真的安裝成功,還可以在我們自己頁面最上方與下方各放一張促進分享的圖片,並用不同的事件動作(或標籤),這麼一來就可以在 Google Analytics > 行為 > 事件 系列報表中比較哪一個頁面比較容易被分享,且到底是頁面上還下方的分享按鈕比較容易被點擊嘍~~~

檢視事件發生網頁與位置

這篇 Google Analytics 精選文章發表於2016 年 01 月 25 日 星期一

立即訂閱看見數據網電子報

數據變化萬千,跟著看見數據網從數據中洞察網站經營脈動、缺失與機會!!