2015年2月25日 星期三

各種 htaccess 的寫法集合

.htaccess Snippets
網址: https://github.com/phanan/htaccess

因為太實用了所以一定要發一篇記錄一下,因為真的不會沒事去研究怎麼寫 htaccess...。

2015年2月24日 星期二

2015 Google 的數位火星計劃,學生報名只到 3/31

(圖片來源網址: http://www.google.com.tw/landing/ignite/index.html)

好羨慕,看到這活動我都覺得我老了,這麼青春有活力的活動我竟然不能去~ 嗚.. 誰來借我學生證 ><

活動網址

報名限定
國內各大學院校及研究所之應屆畢業生與 2015 年 6 月底前退伍的役男均可報名參加,並需獲得 Google AdWords 認證。

為了讓應試者取得 google adwords 的證照,google 還提供了認證課程,這個真的超棒的,因為之前看 google partners 的 adwords 大部份只有文件可以看,都要哭了... (只看文件是很辛苦的 T_T)

課程的資源有分實體課程線上課程請看


線上課程網址
Google 數位火星計劃 | AdWords 廣告基礎課程
Google 數位火星計劃 | AdWords 廣告進階搜尋課程

2015年2月21日 星期六

DigitalOcean perhaps iptables or your kernel needs to be upgraded

我的 ubnutn 是 14.04,本來今天要看一下怎麼設定防火牆,今天在下 iptables -L  時出現 『Perhaps iptables or your kernel needs to be upgraded.』 這個訊息,真是嚇死我了...
root@demo-server:~# iptables -L
modprobe: ERROR: ../libkmod/libkmod.c:556 kmod_search_moddep() could not open moddep file '/lib/modules/3.13.0-36-generic/modules.dep.bin'
iptables v1.4.21: can't initialize iptables table `filter': Table does not exist (do you need to insmod?)
Perhaps iptables or your kernel needs to be upgraded.

後來根據官方的討論論壇,解藥:
apt-get install linux-image-$(uname -r)

再重新下 iptables -L 就可以了。
(下 iptables 需要 root 權限,sudo iptables -L,範例沒有是因為我已經是用 root 登入)


參考
* problem with iptables and ubuntu Ubuntu 13.10
* How To Set Up a Firewall Using IP Tables on Ubuntu 12.04
* 配置Ubuntu後透過SSH連線設定Host以及防火牆
佛祖球球-[Ubuntu]iptables 設定


2015年2月20日 星期五

Redis for Laravel on Ubuntu (14.04)

在 Laravel 設定 session 寫入到 redis。

安裝 Redis
* 通常我是用 apt-get 去安裝: apt-get install redis-server
安裝完後,試試看 redis-server 指令是否有成功。


2015年2月19日 星期四

Google Tag Manager 體驗記

(此圖截自: http://www.google.com.tw/tagmanager/)

Google Tag Manager  (以下簡稱 GTM) 已經出來好一陣子了,等我用的時候應該已經很多人用得嚇嚇叫了,我還在起跑點上似的...,趁著春節假期有點不知道要介紹什麼,所以就打算寫寫 GTM 的使用心得。

考取 Bing Ads 資格鑑定專業人士 心得


Bing Ads 資格鑑定說明網址:  http://advertise.bingads.microsoft.com/zh-tw/xunlian-zigejianding。如果你已經把課程上完了,那麼可以點選 『接受測驗』,開始考試。


首先會先要你登入,接著確認你的身份,在此也會有一些關於考試的說明,像是通過分數跟考題等等 :

關於 Bing Ads 資格鑑定專業人士 Bing Ads Accredited Professional

2015年2月18日 星期三

取得 888 Yahoo Bing 廣告金,可以來下關鍵字廣告了!

前幾天發現了這個活動 『Yahoo Bing 關鍵字廣告送您第一筆廣告金 $888,讓您一路發發發!』的活動,就立刻填完秒單送出去,隔天,還真的收到一組序號可以使用。


活動到什麼時候我不確定,沒看到明確的日期,總之還蠻不錯的,記得使用方式跟規則,還是要看一下,有需要的朋友可以申請看看 XD。


接著使用抵用卷要到 Bing Ads 的帳戶設定那邊,輸入優惠代碼,送出後隔一下就會更新了

成功收到抵用卷之後,也會收到一封信,通知你錢已經加進去了 :)
可以下關鍵字廣告了 XD

2015年2月17日 星期二

Analytics Academy - Digital Analytics Fundamentals - Final assessment 答案與一些解釋

這篇是記錄作答 Digital Analytics Fundamentals - Final assessment 的一些筆記,要往下看的朋友們,要注意一下是否版本對了,畢竟我想這種 Assessment 總是會因為時間的關係,往後會有更新題目的可能。

我第一次做答是 75% 的正確率
第二次 90%
第三次才是 100%
(難就難在題目看不懂而已...,但問題在於我想要考英文版...,淚奔...)

本來想要一題一題貼過來的,但後來在網路上找到完整的題目跟解答,歡迎有需要的人自行觀看 Analytics Academy Answers - Google Analytics

Digital Analytics Fundamentals 主要的考試方式就是:

1. 指標跟維度的差別,要能夠分辨及舉例
2. 工作階段的定義
3. Filter
4. attribution (這個要我打中文我還真的打不出來... )
5. campaign 的 link 怎麼產生,以及有哪些參數 (utm_source, utm_medium, utm_term, utm_content, utm_campaign)


第10題,答案就是有 display 的那個選項,display 你可以當成是廣告版位的意思。


第 12 題:
Add campaign link tags to the URL http://www.mysite.com/home so that traffic to the link would show in the All Traffic report as "coupon / email" and in the Campaigns report as "springsale". Enter the tagged URL here.

就充分的需要運用到 Analytics 的網址產生器,如果你夠熟的話也許可以背得出那些 GET 參數。依照題目的解釋,其實也夠白話的了,把它需要的值 key 到網址產生器,就可以得到解答。



2015年2月16日 星期一

考取 Google Analytics IQ (GAIQ) 心得


現在考 google analytics (以下簡稱 GA) 證照不用報名費,至於如果想要考的話,我想該做的準備自己應該都知道了 (如申請 google partner 帳號等等)。

準備 GA 考試,google 也有提供一些方向讓應考的人做準備,你也可以到 Google Analytics Academy 去看影片學習,這麼完整的影片大概是準備 Analytics 證照才有,嗚~像準備 google adwords 就沒有 (淚)。

2015年2月15日 星期日

Bing Ads 帳戶設定付款方式

心血來潮來寫一下使用 Bing Ads 設定帳戶的方式,這個部分呢,算是接觸 Bing Ads 前期很基本的設定,但我還是紀錄一下,畢竟現在還是個 bing ads 新手。

大方向來分的話為兩種,先付跟後付。

*先付就是先付一筆錢,下廣告之後,從那筆錢扣。
*後付當然就是下廣告之後,一段時間會跟你收錢。
*付款方式是在下廣告之前一定要瞭解的部分,一定要設定付款方式,否則是不能下廣告的。
       
*還有帳戶一旦設定過預付或者後付,就無法進行修改。










因為我沒有用過後付,如果你有對於後付的開始日期與繳費等問題,可以看這篇

不論先付或是後付,付款方式都相當多元,在台灣地區,除了常見的信用卡/ ATM,便利商店, 郵局, 銀行繳款都可以,你可以閱讀這篇文章 如何新增信用卡或其他付款方式? 來更加了解付款方式。




2015年2月12日 星期四

Heroku 放上 Laravel 專案

Laravel 專案放到 Heroku

1. 在你的專案目錄下建立 Procfile,寫入以下資訊
   web: vendor/bin/heroku-php-apache2 public
我是指專案下的根目錄,不是放在 public 底下。

Expr 社群論壇專屬 APP 上架



其實上架有兩週了 (逃~)

Expr 社群論壇的 Founders 都是我的朋友,最近他們在 apple store 上,上架了 APP,由於過去我曾經學過一點 Objective-C 也是他們指導 :),希望路過這個 Blog 的人可以多多支持這個 APP 瞜,謝謝!。 iTunes 連結 以及 Web 版網址

如果你想逃離現在很多人已經在用的討論版,或是你想要建立一個不想被太多人知道的個人版,或是... 你只是單純的有很多連結想要分享出去或是做個紀錄等等,這裏都是一個不錯的選擇,而且網站一直有在 maintain。


2015年2月11日 星期三

DigitalOcean 移機 / Resize 經驗



一般來說我們在 cloud service 商 (AWS, DigitalOcean, Linode) 那邊建立 instance,可能會有需要升級的情況,像是升級記憶體等等 (嚴格來說我也不知道哪些東西可以升... 因為我只用過 DigitalOcean...)。

在 DigitalOcean 上,instance 就是 Droplets,不過要升級原有已經建立好的 Droplets,要注意的是只能升級記憶體,其他的都不行。


總而言之,在 DigitalOcean 有兩條路

1. 原 instance 升級 (resize),但是只能針對記憶體,其他則無。
2. 備份原 Droplet (暫時關機 snapshots 下來 , DB 備份等等),然後建立新的 Droplet (在 DigitalOcean 一樣的錢如果是用來開新的 Droplet 我覺得比較划算,resize 的話只有得到記憶體,可是也是花一樣的錢... ),建立的時候可以直接選用已經建立的 snapshot,詳細步驟可以參考:How To Resize Droplets Using Snapshots

選 2 的風險來了,如果你的產品已經在線上,又另購 instance,那就是 IP 要重新指定到新 instance,至於 DNS 什麼時候生效也是無法保證,我有遇過 5 分鐘,也有遇過真的要 2 天的
...。無法解釋的清楚,要換好的,就是得等了 :P (不過那一刻真的超緊張...,真的深怕會等上兩天)

預計下次有機會想要用 AWS 了。雖然說 DigitalOcean 目前用起來感覺不錯,介面簡單,客服回應速度夠快,但總是想用用別家的看看。


用 snapshot 建立新的 instance

我的嘗試結果是,任何設定檔都一樣,連 mysql 的密碼都一樣,資料也還在,無痛轉。
阿有啦,想起來了,只有 hostname 不一樣,那是一開始在建立 instance 的時候的名字 XD
但是對整個 server 的運作來說,幾乎沒有影響。


2015年2月10日 星期二

MySQL 分頁的 Store Procedure

之前在某專案上採用前後皆是接 API 的方式來撈資料,說是時程趕,所以幾乎所有的資料都是夠過 Call Store Precedure,當時在處理後台的列表部分,覺得分頁非常難寫...,後來找到很多 Source,不過都寫得太複雜了,最後給大家參考這篇 洞庭小虾 - mysql 分页存储过程 ,算是非常基本款的分頁寫法,不錯用了。

這個分頁的寫法很適用在只撈同一張 Table,或是查詢, 排序,皆可,因為查詢排序都是靠 GET/POST 參數去判斷怎麼串參數到 Store Precedure 而已,重點就是只能撈同一張 Table,這樣這隻 SP 就能走整個後台所有的列表。

但是如果某列表的邏輯需要 Join 其他 Table,那麼你就要複製這隻 SP,另外客製出只符合這個列表的 SP 了,也就是說,就很難拿出來共用了。

比方說產品列表,如果只單純撈產品那張 Table 的東西,那麼這隻 SP 適合用,但是如果產品列表還需要 join 『產品規格』列表的資料進來,那這隻 SP 你可能就要拿出來改一改了。

執行這隻 SP 要記得把 OUT 接出來,可以得到總數,進而算出總共有幾頁。

就是這樣,分頁好煩 (當時覺得 ORM 是天堂),想要一隻 SP 打整個後台的列表,我看是容易  GG 的成分比較高,就算只能寫成一隻,那應該很難維護,可能寫到連自己都看不懂,想到就頭麻...,如果大家有更好的方法也歡迎讓我知道,雖然我很不習慣寫 SP xdd。

2015年2月7日 星期六

Google Analytics Debugger 介紹


Hi,我又來介紹一款跟 Google Analytics 有關的 Extension 了。
Analytics Debugger  是一款 Chrome Extension,跟我上次寫的那篇 Google Analytics Tag Assistant 一樣,都是已經發佈很久的 extension,只是我最近才發現,大概是因為工作的關係,所以一直不太需要這樣的工具....。 但是最近發現他很好用,一切都是做中學,學中做啊... 。


當你安裝完了之後呢,一樣在 chrome 右上角的按鈕列,你可以找到他的 icon,如圖,如果他是 Off,就表示你沒有使用它,你可以先瀏覽到你的網站,然後把它 ON 起來。




Event Tracking Result


 一旦把 GA Debug  切換為 On 之後,你就可以開啟檢查元素,接著在 Console 的 Tab 就可以看到 GA Debug 的結果。



沒什麼特別的地方一樣是,如果你有埋好 GA tracking code 的話,他會在 console 面板呢顯示出你的 Tracking Code 等資訊。

當然 Analytics Debugger 應該很多實用的地方,不過我今天之所以寫這篇只是要分享一下我為什麼會找到它,以及使用它。

前幾天在測試所謂的 Event Tracking 事件追蹤,用途就是當 user 按下某些按鈕之後,能夠記錄到 GA 的 Event 資訊,問題就來了,我那個事件埋了好幾天,幾乎沒有下文,而且偶爾都有去觸發 click 事件,事實上如果是程式出了問題 (ga('send'....)) 的話,那麼 console 通常會提示警訊,問題是,也沒有。二來,之所以等上兩三天,是在網路上爬了很多大大的文章,說有可能會等上 24-48 小時,因此我就等了。

在一直不知道原因的情況下,我找到了 Debugger 這個工具,果真,當 Debugger 一打開,觸發某按鈕的 click 事件之後,確實得到了 Target undefined 的結果,也就是這個事件根本沒有送出去,問題的原因在我前幾篇的文章我有寫到,跟使用 GTM 有關啦,不過在這邊就不多講了 :P

修正了這個事件沒有正常送出去的問題之後,一切恢復正常,而且當我觸發某按鈕的 click 事件,照理說在 console 上你會看到送出去的 log:



而且得到的資料是即時的,可以直接到 GA 去看結果。
(當時的我瞬間明白,根本不用等上 24 小時...,成功就是成功了... )

這工具就方便在,如果 RD 跟企劃不在同一個辦公室,又限於雞同鴨講與各說各話的情況下,事情就會一拖再拖的。那麼到底是誰失誤呢? 企劃或管理者確實從來沒看到資料,或者 RD 堅稱就是有把 code 埋好,所以這時候你就需要 Analytics Debugger 了 :P ,來多一分證明,早日發現解決方法。

2015年2月6日 星期五

Study Hard, Be Myself.


今天,把某專案零星的 bug 修一修,網站整理一番。
決定下週即將進入那惱人,讓人厭惡至極的專案。


暫且我把 Facebook 關掉些陣子,好好讓自己變得更好才是,有能力才能有更多的選擇,不需要多說什麼了。世界上有種東西無法撿現成,那就是實力。

2015年2月5日 星期四

Laravel 將後端的 Array 轉成 JavaScript 用的 Array

把後端的資料傳到前端,再傳給 JavaScript 當作變數,真的是超常見的功能...,不過我當時一時趕時間,就這樣做了,也不知道是好還是不好,有請各位大大指點指點 xdd

Controller 的部分沒有什麼變動,主要是撈資料時,最後 ->toArray(),再丟給前端。

$backendAry = XXXXX  ->get()->toArray();


前端 View 的部分:

<script>
var backendAry   = <?php print json_encode($backendAry); ?>;
</script>

然後就暫時獲得解決,只是不夠漂亮。

當然在這之前我試過 PHP-Vars-To-Js-Transformer,但是那個設定檔,我還是.... 覺得可以再更好,暫且因為串接一些 API 的問題以至於當時沒有用到它。

2015年2月4日 星期三

Google Analytics Tag Assistant 驗證追蹤碼是否正確安裝

今天要介紹一個 chrome extension 叫做 Tag Assistant (by Google) ,跟 Google Analytics 有關係的 Extension,由 Google 自己開發。




這個工具呢... 嚴格說起來也有好一陣子了,但是我也是最近才發現這個好物,說起來是挺方便的,他適合網站企劃人員,或是網站驗收者,Manager (在不了解什麼是 HTML 或是埋 code 流程的情況下) 在驗收網站時,可以用來確認該網站是否有正確的埋入 Google Analytics Tracking Code。

把這個套件加到 Chrome 之後,你就可以在瀏覽自己的網站上時,按下 Chrome 右上角的 icon。




接著他會先詢問你是否要檢查當下的頁面。



這是其中一個網站的檢查結果,在結果可以發現該網站確實有埋下 Google Analytics 以及 Google Tag Manager 的 code,但是呢,他也發現了 Google Analytics 多了埋一次 (Where to optimize 的部分)。




正常情況下你的笑臉 icon 會是綠色的:


沒有埋的情況:



大概是這樣,一個簡單的工具,但是方便。
好玩的地方是可以看別人的網站,而不是檢查自己的 :P






2015年2月3日 星期二

Node.js createWriteStream 出現 spawn ENOENT error

剛好在處理圖片上傳, 圖片 resize 的功能,結果 resize 一直出錯,根本沒寫到 rezise 的 path 檔。

結果只是 GM 沒裝...

sudo apt-get install imagemagick

這樣就好了 T_T。

2015年2月2日 星期一

純粹無言文的 GA Event Tracking

最近在嘗試做 google 分析的 Event Tracking,簡單來說就是對一般按鈕做事件的 tracking,但是怎麼加都沒有成功,用法也是 Try 了好幾次,發現也不是語法問題, JS 也沒有錯,到底問題是什麼..

後來發現 GA  有 chrome 的 extension (Google Analytics Debugger),可以方便 debug,就在我觸發那個 event tracking 的按鈕時,收到了 target undefined 的訊息,也就是說,程式有送了,可是沒有接收的對象。

問題實在不合理,不過我必須說因為我的 GA 是透過 GTM (Google Tag Manager) 裝上去的,後來我又裝了一次 GA 分析碼:

差別在於使用 『自動 HTML 代碼』的方式加入自己的 GA js (如圖 GA2),卻成功了,而使用 『通用 Analytics 分析』(如圖 GA) 卻是導致於我之前一直沒有 tracking 成功的因素。

最後,我捨棄了 GTM 本來就提供的『通用 Analytics 分析』,因為裝了也沒有用,後來還是走自己貼整段追蹤碼的方式...

而且改了之後是立刻有效,馬上就可以在即時->事件報表中看到結果,我感動得都要哭了... (到底 GTM 的 ga tracking  是施了什麼黑魔法,拭淚..)

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...