Write.as 加裝 GoatCounter筆記

部落格文章放在Write.as，本身是有簡單的統計功能的，可以查看30天內的訪客資訊，看得到過去30天的訪客數、總訂閱數、Referrers (字面上的意思是推薦人，不懂要怎麼翻譯比較好，感覺是指從哪裡連進來的？)，還有Top 25閱讀數的文章。

其實以上這些資訊對我的部落格來說已經夠了，但如果想要知道更多訪客資訊，例如讀者來自哪裡？應該就需要別的工具了，最近剛好看到有嘟友轉了這篇文章：Solidot | Google Analytics 的轻量级开源替代。不想用Google Analytis，以及費用等問題，好奇之下就選了GoatCounter這個有提供個人、非商業使用免費的方案。

申請帳號之後，發現安裝方法很簡單，只要在網頁中插入下面這一行，應該就是在Write.as的Javascript設定那邊插進去就好。

<script data-goatcounter="https://[AccountName].goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

但是！馬上發現了一個問題：Write.as好像只能插入Javascript的程式碼內容，不能引入外部的.js檔？

喔喔喔！我的天，這出乎我的意料之外，也超出我僅有的芝麻綠豆大小媲美金魚腦的技術知識能力了！怎摸辦？只好再查查GoatCount的官方說明了，發現似乎有救了？

還是可以直接把count.js的內容直接貼進來，然後測試了一下。

    window.goatcounter = {endpoint: 'https://[AccountName].goatcounter.com/count'};

    // [.. contents of count.js ..]

耶！成功了，統計數據有出現了！不過，我還是不死心，想說未來count.js內容有更新，我是完全不會得到Updates的，因為我是直接複製貼上的啊！有沒有方法可以用Javascript來引入外部的.js檔並執行呢？

然後我就找到了這篇文章：動態載入JavaScript檔案的兩種方法，裡面詳細教了如何動態地載入一個.js檔，雖然我完全看不懂內容，但把GoatCounter的count.js位置放進去，插入到Write.as的Javascript設定區域中，測試一下，就發現成功啦！感謝網站的教學資源，讓我完全不懂Javascript也能插入外部.js檔成功安裝了GoatCounter！💃🏻

// Add GoatCounter Code
window.goatcounter = {endpoint: ‘https://[AccountName].goatcounter.com/count’};
// Dynamically load count.js
var head= document.getElementsByTagName(‘head’)[0]; 
var script= document.createElement(‘script’); 
script.type= ‘text/javascript’; 
script.onload = script.onreadystatechange = function() { 
	if (!this.readyState || this.readyState === “loaded” || this.readyState === “complete” ) { 
	// Handle memory leak in IE 
	script.onload = script.onreadystatechange = null; 
	} }; 
script.src= ‘https://gc.zgo.at/count.js’; 
head.appendChild(script);

#blog #Writeas

先聲明，我不是資訊出身的，沒有什麼程式的基礎，也不是從事相關領域的工作，只有在學校寫過一點bash script / C++的經驗 (不要問我，我都還給教授了)，因為嘟友詢問怎麼將LikeCoin的LikeButton放到Write.as網誌裡，於是寫下這個記錄，不敢說是教學，同樣是超級外行，我也是拼拼湊湊意外被我弄出來的，單純瞎子摸象的經驗 ，或許你有更好的安裝方法，或者更好、更簡潔的語法，也可以分享給我？謝謝！

以下簡單說明我是如何加入LikeButton到Write.as網誌裡頭的：

1. 首先參考了Write.as Themes範例網站裡頭的Javascript，像是『Longhouse Life』這一個，在網誌文章的最下面加入了作者想加入的連結列，我把這段拿來使用，加入了Back to top ↑回到文章最上面的功能，只需要簡單修改一下HTML碼就可以了！
2. 再來我參考了 『以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton』這一篇教學底下的程式碼，找出產生LikeButton的段落，然後加到上面Write.as範例裡頭的Javascript中。這裡可以參考前面第1點的Javascript裡頭的註解，將LikeButton的段落放到Add to individual blog post page這一段最後面，就可以在每篇文章顯示LikeButton了。

最後將完整的Javascript碼貼到Write.as設定裡的Custom Javascript欄位中，基本上如果可以看到LikeButton出現就大功告成了，只要再加入CSS style調整版面字型等樣式修飾就可以了。

可以參考我的網誌Javascript程式碼如下，記得把[Liker ID]換成你自己的；另外，CSS class需要自己定義重新修改一下適合自己的樣式：

var topP = document.createElement("p");
topP.innerHTML = '<div class="custom-nav"><a href="#">Back to top ↑</a></div>';

var cont = document.getElementById("wrapper");
if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
cont.insertAdjacentHTML("afterend", "<div class='custom-nav likecoin'><p>-<br><em>如果你喜歡我的文字，請幫忙按 5 下 Like！我將得到 LikeCoin 的回饋。</em></p><p>回饋由 <a rel='nofollow'  href='https://like.co/'>LikeCoin</a> 基金會出資，只要註冊/登入帳號，點 5 下 Like 就可以贊助我的文章。化讚為賞，支持創作。謝謝你！</p><iframe scrolling='no' frameborder='0' width='640' height='212' src='https://button.like.co/in/embed/[Liker ID]
/button?referrer="+encodeURIComponent(location.href.split("?")[0].split("#")[0])+"'></iframe></div>");
}

Reference: 1. Longhouse Life — Themes 2. 以JavaScript在Blogger等各家網誌的文末、側欄產生LikeButton

#blog #LikeCoin #Writeas