Free Ebook หัดใช้ Command-line Interface เถอะ

แจกฟรี ebook สอนใช้งานคอมพิวเตอร์ผ่าน Command-line Interface ครับ เป็นหนังสือที่เขียนเป็นเรื่องเป็นราวเล่มแรกในชีวิตเลยก็ว่าได้ครับ

คลิกที่รูปปกเพื่อ Download ได้เลยครับ หรือจะอ่านฟรีบนบราวเซอร์ก็ตามลิงค์ล่างนี้เลยครับ

[อ่านบนเว็บฟรี ebook หัดใช้ Command Line Interface เถอะ]

คลิกที่รูปเพื่อ Download ฟรี ebook "หัดใช้ Command Line Interface เถอะ"

ผมเขียนหนังสือเล่มนี้ขึ้นมาเพื่อเป็นจุดเริ่มต้นสำหรับผู้ที่สนใจใช้งานคอมพิวเตอร์ผ่าน Command-line Interface หรือที่เรียกกันแบบย่อๆ ได้ว่า CLI

มุ่งหวังให้สำหรับคนที่ไม่เคยหรือพอมีประสบการณ์มาบ้างเล็กน้อยได้ทำความรู้จักและสนิทสนมกับ CLI ให้มากขึ้นครับ โดยแนวการเขียนจะยึดหลัก "Learning by doing" คือคนอ่านต้องทำและเรียนรู้จากสิ่งที่เกิดขึ้น ต้องหัดสังเกต และค้นหาส่ิงที่ตนสงสัยด้วยตนเอง

ใครที่เหมาะกับหนังสือเล่มนี้?

หากคุณมีคุณสมบัติดังนี้

1. เป็นคนที่ใช้งานคอมพิวเตอร์อยู่ก่อนแล้ว หมายรวมถึงสามารถลงโปรแกรมเองได้ แก้ปัญหาคอมพิวเตอร์เบื้องต้นได้
2. รู้จักและใช้ CLI มาก่อนเล็กน้อยหรือไม่เคยใช้มาก่อนเลย
3. กำลังสนใจและตั้งใจที่จะเรียนรู้การใช้งาน CLI

หนังสือเล่มนี้เหมาะสำหรับคุณครับ :D

ใช้ Vim เป็น Password Manager ของเรา

วันก่อนมีปัญหาต้อง login เว็บไซต์หนึ่งจากเครื่องชาวบ้าน ต้องยอมรับกันตามตรงว่า "จำพาสเวิร์ดไม่ได้" (แน่แหละ มีเป็นหลายเว็บหลายแอพฯ แต่ละอันก็ตั้งไม่เหมือนกันอีก) ปกติจะเก็บเอาไว้ที่เครื่องส่วนตัวโดยใช้โปรแกรม "password pad lite" อีกทีหนึ่ง เวลาไปใช้เครื่องคนอื่นทำให้มีปัญหามากๆ

เลยมาลองดูว่ามีทางออกไหนให้กับตัวเองบ้าง โดยตั้งเงื่อนไขไว้ ตามนี้

1. ฟรี
2. ต้อง "ง่าย" และ "ปลอดภัย"ในระดับดี
3. อยู่ที่ไหนก็ดูได้ไม่เกี่ยง Device ไม่ว่าจะเป็นมือถือ หรือ คอมฯ

หวยเลยมาออกที่ Vim text editor หน้าตาโบราณๆ แต่ทรงพลังนี้แหละครับ :D

โดยตัว Vim ตั้งแต่ version 7.3 ขึ้นไปจะสามารถเซตให้เข้ารหัสด้วย Blowfish Algorithm ได้ โดยเข้าไป config ในไฟล์   `~/.vimrc`

set cryptmethod=blowfish

และเพื่อเพิ่มความปลอดภัยอีกระดับหนึ่งไฟล์   `~/.vimrc` ควรเพิ่ม config ดังนี้ลงไปด้วย

autocmd BufReadPost * if &key != "" | set noswapfile nowritebackup viminfo= nobackup noshelltemp history=0 secure | endif

เท่านี้เราก็สามารถเข้ารหัสไฟล์ที่เก็บพาสเวิร์ดของเราได้อย่างปลอดภัยแล้ว ด้วยคำสั่ง

$ vim -x <filename>

หรือ ที่ Vim command mode พิมพ์ :X

มาถึงโจทย์ข้อ 3 ผมเลือกใช้ Dropbox เป็นตัวเก็บไฟล์ โดยตั้งชื่อไฟล์ให้ดูธรรมดาๆ ไม่เป็นที่สังเกต

เท่านี้ผมก็สามารถดูพาสเวิร์ดผ่านมือถือ Android ของผมด้วยแอพฯ Vim Touch ได้แล้วครับ โดยที่ Vim Touch ก็ให้ทำการ config .vimrc เหมือนด้านบนด้วย

วิธีการใส่ Syntax Highlight ให้กับ Blogger.com

ดังนี้

1. เข้าไปในส่วนจัดการ Template
2. เข้าสู่โหมด Edit HTML
3. copy css code ทั้งหมดจาก http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
4. นำมาแปะไว้ก่อน tag </b:skin>
5. แปะ code ด้านล่างนี้ไว้ก่อน tag </head>
   

   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>
   
   <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>
   

6. แปะ code ด้านล่างนี้ไว้ก่อน tag </body>
   

   <script language="javascript">
   
   dp.SyntaxHighlighter.BloggerMode();
   
   dp.SyntaxHighlighter.HighlightAll('code');
   
   </script>
   

7. จัดการ save Template
8. ใช้เว็บนี้สำหรับทำ Escape code ก่อน

เวลาใช้งานเข้า Edit HTML mode กำหนด tag <pre> ดังนี้

<pre name="code" class="ภาษาที่ต้องการ">
    // CODE
</pre> 

ตัวอย่าง

# -*- coding: utf-8 -*-

def cheese_and_crackers(cheese_count, boxes_of_crackers):
    print "You have %d cheeses!" % cheese_count
    print "You have %d boxes of crackers!" % boxes_of_crackers
    print "Man that's enough for a party!"
    print "Get a blacket. \n"

print "We can just give the function numbers directly:"
cheese_and_crackers(20, 30)

print "OR, we can use variables from our script:"
amount_of_cheese = 10
amount_of_crackers = 50

cheese_and_crackers(amount_of_cheese, amount_of_crackers)

print "We can even dod math inside too: "
cheese_and_crackers(10 + 20 , 5 + 6)

print "And we can combine the two, variables and math: "
cheese_and_crackers(amount_of_cheese + 100, amount_of_crackers + 1000)

credit : http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger

ประยุคใช้งาน UTM Parameters กับ Social Media Campaigns

ตอนที่แล้วเราได้เห็นตัวอย่างการใช้งาน UTM Parameters กับ Email กันแล้ว คงพอจะจับหลักการกันได้แล้ว วันนี้ลองมาดูว่าหากนำไปใช้งานกับ Social Media แล้วตัวแปรแต่ละตัวเราควรจะให้ค่าอย่างไร โดยตอนนี้จะไม่อธิบายอะไรให้มากความแล้วนะครับ

** หมายเหตุ ** แต่ละกรณีที่จะว่ากันต่อไปนี้สามารถนำไปประยุคใช้งานได้จริง แต่ไม่ต้องยึดติดมาก นะครับ บางอย่างมันขึ้นอยู่กับบริบทและสถานการณ์ที่แตกต่างกัน

UTM Parameters กับ Social Media Campaign

ใน GA เราสามารถเข้าไปดูสถิติผู้เข้าชมที่มาจาก Social ได้ที่เมนู Acquisition > Social แต่จะดีกว่าไหม? ถ้าเราสามารถแยกออกได้ว่าจำนวนเท่าไหร่มาจากการแชร์ของเรา จำนวนเท่าไหร่เกิดจากการแชร์จากผู้อื่น

UTM Medium

utm_medium=social

UTM Source

utm_source=ขื่อของ Social Media นั้นๆ

utm_source=fb

utm_source=facebook

utm_source=twitter

utm_source=linkedin

UTM Campaign

เช่นเดียวกับกรณี Email เราควรจะกำหนดค่าของ utm_camapign ให้กระชับแต่ครอบคลุมเนื้อหาของแคมเปญของเรา เช่น ชื่อโปรโมชั่น

utm_campaign=new_year_sale_2015 (โปรโมชั่นลดราคาต้อนรับปีใหม่ 2015)

utm_campaign=myblog_post-2014_07_14 (บทความในบล็อกส่วนตัวกำกับวันที่เอาไว้ หรือ สามารถใช้อย่างอื่นก็ได้ที่ทำให้รู้ชัดว่าเป็นบทความไหน)

utm_campaign=product_review-ipad8 (บทความรีวิวสินค้า iPad 8)

UTM Content

utm_content ใช้ในกรณีที่เราต้องการเปรียบเทียบวัดผลเท่านั้น ตัวอย่างการใช้งานเช่นในกรณีของ Facebook หากเรานำ URL ไปแชร์ ก่อนที่จะกดปุ่ม Post เราสามารถที่จะแก้ไข Title และ description ได้ครับ เราสามารถทดลองว่า พาดหัวแบบไหนคนคลิกมากกว่ากันได้ ก็จัดการแก้ไขตาใจชอบแต่อย่าลืมกำหนด utm_content ให้สอดคล้องกับพาดหัวด้วยนะครับ เดี๋ยวตอนดูรายงานจะงงเองได้

UTM Term

ไม่จำเป็นต้องใช้ครับ

ประยุคใช้งาน UTM Parameters กับ Email Campaigns

มาถึงตอนที่ 4 จนได้ จากที่ผ่านๆ มาเราได้รู้แล้วว่า UTM Parameters เข้ามาช่วยอะไรเราได้บ้าง ตอนนี้เรามาดูกันว่าถ้าจะเอาไปใช้งานกันจริงๆ เราควรที่จะกำหนดค่าให้กับตัวแปรแต่ละตัวอย่างไรกันดี

** หมายเหตุ ** แต่ละกรณีที่จะว่ากันต่อไปนี้สามารถนำไปประยุคใช้งานได้จริง แต่ไม่ต้องยึดติดมาก นะครับ บางอย่างมันขึ้นอยู่กับบริบทและสถานการณ์ที่แตกต่างกัน

UTM Parameters สำหรับ Email Campaigns

โดยปกติแล้ว GA จะมองว่า `Email` เป็นช่องทางหลักช่องทางหนึ่งอยู่แล้ว (ดู Report ได้ที่ Acquisition >> Channels) แต่ GA จะสามารถ Track ได้ในกรณีที่มาจากการเปิดอีเมลอ่านผ่านบราวเซอร์เท่านั้น หากเปิดอ่านด้วย Email Client ตัว GA จะไม่สามารถ Track ได้ ดังนั้น เราควรเป็นอย่างยิ่งที่จะใช้ UTM Parameters กับอีเมล

UTM Medium

เพื่อไม่ให้สับสนกับ Channels `Email` เราควรใช้ utm_medium=email ไปเลยและไม่ควรมีอะไรต่อท้ายอีกเช่น email-monthly, email-newsletter

UTM Source

เป็นอีกหนึ่งตัวแปรที่มักจะกำหนดค่าให้ผิดกันอยู่บ่อยๆ บางคนอาจกำหนดว่า utm_source=email (ซึ่ง email มันควรจะเป็นค่าของ medium) หรือไปกำหนดเอาชื่อผู้ให้บริการส่งอีเมลเป็นค่า source เช่น utm_source=mailchimp ซึ่งการกำหนดค่าเหล่านี้ไม่ถูกต้อง

ค่า Source ที่เราจะกำหนดให้กับ Email Campaigns นั้นควรจะเป็น “แหล่งที่มาหรือประเภทกลุ่มของ Email เหล่านั้นมากกว่า” เช่น

• เป็นอีเมลที่มาจากการลงทะเบียนรับข่าวสาร ควรเป็น utm_source=newsletter
• เป็นอีเมลที่กลุ่มที่เราจัดว่าเป็นสมาชิก VIP ควรเป็น utm_source=vip_list
• เป็นอีเมลที่เราแบ่งกลุ่มเอาไว้เพื่อทำ A/B Testing ควรจะเป็น utm_source=group1_list , utm_source=group2_list

ดังนั้นพอจะสรุปได้ว่า ในกรณี Email Campaigns utm_source=(แห่งที่มาหรือกลุ่มของอีเมลเหล่านั้น)

UTM Campaign

ตัวแปร utm_campaign ควรจะกำหนดให้สามารถอธิบายภาพรวมหรือจุดประสงค์ของแคมเปญนั้นให้มากที่สุด โดยต้องไม่กำหนดให้ซ้ำกับ source และ meduim เพื่อกันการสับสน

เรามาลองดูตัวอย่างเป็นกรณีๆ ไปพอให้เห็นภาพนะครับ

• อีเมลข่าวสารประจำสัปดาห์หรือประจำเดือน :: อันนี้ง่ายๆ เลยครับ กำหนดตรงๆ ไปเลยutm_campaign=weekly , utm_campaign=monthly แต่หากเราต้องการที่จะวัดผลว่าแต่ละสัปดาห์หรือแต่ละเดือนตัวเลขเป็นยังไงเราสามารถที่จะใส่ส่วนขยายลงไปได้อีก เช่นutm_campaign=weekly-2014_07_12 , utm_campaign=monthly-2014_07 ส่วนเหตุผลที่วันที่ควรอยู่ในรูปแบบ YYYY_MM_DD นั้นด้วยว่าหากเราต้องการนำไปวิเคราะห์ข้อมูลในภายหลังเราจะสามารถจัดเรียงลำดับได้ง่ายครับ
• อีเมลที่จะส่งมีลำดับชัดเจน :: เช่น เราเปิดคอร์สออนไลท์โดยเรียนผ่านทางอีเมล สมมติว่าชื่อคอร์ส “Guide to Dummy” หน้าตาของ utm_campaign ควรจะเป็น ดังนี้
  • utm_campaign=guide_to_dummy-ch1
  • utm_campaign=guide_to_dummy_ch2
  • …

ยกตัวอย่างมาก็คงจะพอได้ไอเดียกันบ้างนะครับสำหรับการกำหนดค่าให้กับตัวแปร campaign

UTM Content

utm_content เป็นตัวแปรที่สามารถช่วยเราได้มากหากแคมเปญนั้นเราต้องการทำ A/B Testing เช่น

• สมมติว่าเราส่งอีเมลเชิญชวนให้มาลงทะเบียนเรียนคอร์สออนไลน์ของเรา ภายในอีเมล์ที่เราส่งไปจัดทำเป็น Graphic สวยงาม เราต้องการรู้ว่าปุ่มไหนที่อยู่บนอีเมลฉบับนี้มีคนคลิกมากว่ากัน ระหว่าง ปุ่ม“ลงทะเบียนทันที” และ ปุ่ม “อ่านรายละเอียดเพิ่มเติม” โดยทั้งสองปุ่มจะส่งคนคลิกมายังหน้า LDP เดียวกัน เราสามารถทำ URL ออกมาได้ 2 แบบที่มี utm_content ที่ต่างกัน ดังนี้
  • utm_content=register_now
  • utm_content=read_more

UTM Term

สำหรับ Email Campaign เราไม่จำเป็นต้องใช้ utm_term ครับ

เขียนไปเขียนมาชักยาว คงต้องยกไปตอนต่อไปเลยนะครับ ตอนหน้าเรามาดูกันว่าสามารถใช้ UTM Parameters กับแคมเปญประเภทไหนได้อีกบ้าง

เรียนรู้การประยุคใช้งาน UTM Parameters กับ Google Analytics ฉบับเร่งด่วน ตอน 3

มากันถึงตอนที่ 3 กันแล้วนะครับ ตอนนี้ว่าจะเขียนในส่วนของการกำหนดค่าให้กับตัวแปร source, medium, campaing กันสักหน่อย โดยปกติในส่วนการตั้งค่าให้กับ UTM Parameters ทาง Google เองก็มีข้อห้ามอยู่เพียงไม่กี่ข้อเท่านั้น เช่น ห้ามใช้อักขระพิเศษต่างๆ

แต่จะดีหว่าไหมหากเราทำให้เป็นระบบระเบียบ?

** หมายเหตุ ** ข้อระวังและข้อควรปฏิบัติเหล่านี้เป็นวิธีการส่วนตัวเพื่อความเป็นระเบียบไม่ทำตามนี้ก็ไม่เป็นไรครับ

ข้อควรระวังในการกำหนดค่าตัวแปรต่างๆ ให้กับ UTM Parameters

1. ควรใช้ตัวอักษรภาษาอังกฤษเท่านั้น

หากมีคำถามว่า “ใช้ภาษาไทยได้หรือไม่” ตอบว่า “ได้ครับ” แต่หากเราลองใช้ เครื่องมือสร้าง URL ที่ Google ให้มาเราจะได้หน้าตา URL + UTM ออกมาประมาณนี้ ซึ่งดูแล้วไม่น่ารักเลย

—
http://www.yourdomain.com/?utm_source=%E0%B8%AA%E0%B8%99%E0%B8%B8%E0%B8%81
&utm_medium=%E0%B9%81%E0%B8%9A%E0%B8%99%E0%B9%80%E0%B8%99%E0%B8%AD%E0%B8%A3%E0%B9%8C
&utm_campaign=%E0%B9%84%E0%B8%97%E0%B8%A2%E0%B8%88%E0%B8%B1%E0%B8%87%E0%B8%AE%E0%B8%B4
—

โดยทางเทคนิคแล้วเราสามารถนำ URL อันนี้ไปใช้งานได้นะครับ โดยไม่กระทบกับหน้าตา Report ของเราแต่อย่างใด แต่มันจะดีกว่าหรือไม่ถ้า URL ที่เราจะนำไปใช้งานนั้นสามารถอ่านออกได้โดยสายตาของเราเองตั้งแต่ต้น

หากหลีกเลี่ยงไม่ได้ที่จะใช้ภาษาไทยในการกำหนดค่าแล้วนั้น ขอให้ใช้ให้น้อยที่สุด หรือ ใช้เฉพาะกับ parameter `utm_term` เท่านั้น

2. ตัวอักษรพิมพ์เล็กพิมพ์ใหญ่มีค่าไม่เท่ากัน

เนื่องจากตัว GA มอง UTM Parameters ที่ส่งมาเป็นแบบ case sensitive นั่นหมายความว่า คำๆ เดียวกัน แต่เขียนตัวตัวอักษรพิมพ์เล็ก พิมพ์ใหญ่ต่างกันตัว GA จะมองว่ามันคือคนละคำกัน ยกตัวอย่าง เช่น คำว่า `email` `EMAIL` `Email` สามคำนี้ถือว่าเป็นคนละคำกัน

โดยทั่วไปแล้ววิธีการแก้ปัญหานี้แบบง่ายที่สุดคือ “ใช้ตัวอักษรพิมพ์เล็กทั้งหมด”

3. ไม่ควรมีเคาะวรรคใน parameters

ในกรณีที่ค่า parameter ของเรามีการเว้นวรรค เช่น ชื่อ Campaign ว่า `Midnight Sale 2014` โดยปกติตัว space ระหว่างคำเราสามารถใช้ URL encoding `%20 ` ในการเติมแทนเข้าไปได้ โดยหน้าตาตัว parameters จะออกมาได้แบบนี้

utm_campaign=midnight%20sale%202014

แต่มันดูไม่สวยงามและอาจทำให้สับสนได้ ในกรณีนี้เราควรใช้ `_` (Underscores) มาใช้แทน `%20`หน้าตา URL จะออกมาแบบนี้

utm_campaign=midnight_sale_2014

4. ใช้ `-` (dashes) ในการแบ่งค่าใน parameters

ในบางกรณีที่เราต้องการเพิ่มรายละเอียดลงไปในตัว parameters เดียวกัน เราควรที่จะแยกค่าเหล่านั้นให้เห็นชัดเจน ยกตัวอย่าง เช่น

เราจัด Campaigns เชิญชวนสมาชิกให้มาลงทะเบียนเข้างานอีเวนท์งานหนึ่ง โดยกำหนด ส่งอีเมล์ทั้งหมด 2 รอบ รอบแรกส่งหาสมาชิกที่เราเลือกเอาไว้แล้ว 100 คน รอบที่ 2 จะส่งไปหาสมาชิกที่ยังไม่มาลงทะเบียนจากรอบแรกอีกครั้งเพื่อเชิญชวนสมาชิกเหล่านั้นให้มาลงทะเบียนให้ได้ โดย การส่งแต่ละรอบเราจะใช้ชื่อ Campaign เดียวกัน แต่ต้องแยกให้ชัดว่ามาจากการส่งอีเมลครั้งไหน เราสามารถกำหนดค่าให้ต่างกันได้ ดังนี้

utm_campaign=great_event-round1
utm_campaign=great_evnet-round2

เท่าที่พอจะนึกได้ก็มีอยู่เท่านี้ครับ เดี๋ยวตอนหน้าจะมาดูกันว่าเราควรกำหนดค่า source, medium, capmaign ในกรณีต่างๆ กันยังไง

เรียนรู้การประยุคใช้งาน UTM Parameters กับ Google Analytics ฉบับเร่งด่วน ตอน 2

จากตอนที่แล้วเราได้ทำความรู้จักกับ UTM Parameters กันไปแล้วว่าสามารถเข้ามาช่วยเติมเต็มรายงานของ GA ได้อย่างไร ตอนนี้เรามาดูกันต่อว่าแคมเปญประเภทไหนบ้างที่จะนำ UTM มาใช้งานได้อย่างมีประสิทธิภาพ

ทำไมเราถึงต้องใช้ UTM Parameters ?

จากบทที่แล้วเราพอจะมีเหตุผลหลักๆ มาตอบคำถามนี้ได้ 2 ข้อ คือ

1. Referrer ที่ GA ได้รับไม่ได้ตรงกับความจริงเสมอไป (หากใครนึกไม่ออกให้ลองกลับไปอ่าน ตอนที่ 1 ใหม่นะครับ)
2. ในการทำการตลาด เราต้องการข้อมูลมากกว่า Referrer เช่น banner ขนาดไหนที่สามารถสร้าง traffic คนเข้าเว็บให้เราได้มากกว่า ฯลฯ

ด้วยเหตุผล 2 ข้อนี้ เราก็พอที่จะกำหนดได้แล้วว่า เมื่อไหร่ควรที่จะนำ UTM มาใช้งาน

เมื่อไหร่ที่เราไม่ต้องใช้ UTM ?

เราไม่จำเป็นที่จะต้องติด tags ในทุกๆ ลิงค์ของเรา ในบางกรณีจะดีกว่าถ้าจะปล่อยให้ลิงค์เหล่านั้นอยู่ของมันไปอย่างเดิม

1. ลิงค์ภายใน (Internal Links)

เราไม่จำเป็นต้องติด tags ให้กับลิงค์ภายในเว็บของเราเอง ยกตัวอย่างนะครับ

สมมติว่าคุณเขียนบทความขึ้นมาใหม่หนึ่งบทความ หลังจากนั้นคุณหรือคนอื่นๆ นำไปแชร์ลงใน Facebook หรือ Twitter จากนั้นมีผู้เยี่ยมชมมาคลิกเพื่อเข้ามาอ่านบทความของคุณจนจบ (สมมติว่าบทความ คือhttp://www.yourweb.com/how-to-do-something.html)  หลังจากนั้นผู้เยี่ยมชมคนนั้นต้องการไปยังหน้า HOME เพื่อที่จะอ่านบทความอื่นๆ ของคุณ โดยการคลิกไปที่ลิงค์ที่คุณติด tags เอาไว้ (สมมติว่าเป็น http://www.yourweb.com/home/?utm_source=self&utm_medium=howto&utm_campaing=tagcrazy) ในกรณีนี้ตัว GA จะเข้าใจผิดทันทีว่าผู้เยี่ยมชมคนนี้ไม่ได้มาจาก Facebook หรือ Twitter แต่จะไปเหมารวมเอาว่าผู้เยี่ยมชมคนนี้มาจาก source self

หากเราต้องการที่จะดูพฤติกรรมของผู้เยี่ยมชมว่าหลังจากอ่านบทความของเราแล้วไปต่อที่หน้าไหนอีกบ้าง เราสามารถใช้ความสามารถที่มีอยู่ของ GA ได้ (ในที่นี้ไม่ขอพูดถึง)

2. มาจากการค้นหาธรรมดา (Organic Search)

GA สามารถรู้ได้เองว่าผู้เยี่ยมชมเข้ามาจากการค้นหาผ่านทาง Search Engine โดย GA สามารถบอกได้ด้วยว่าเข้ามาด้วย keyword อะไร ดังนั้นจะเป็นการดีกว่าที่จะไม่ติดตั้ง UTM กับหน้า Campaign ที่ต้องการทำ SEO

3. แหล่งอ้างอิงที่เกิดจากผู้อื่น (Natural Referrers)

ในกรณีที่มีเว็บไซต์อื่นแปะลิงค์อ้างอิงถึงเว็บไซต์ของเราหรือเอาลิงค์บทความที่เราเขียนไปอ้างอิงการตอบกระทู้ตามเว็บบอร์ดต่างๆ ซึ่งในกรณีเหล่านี้เราไปบังคับให้ผู้ที่นำไปอ้างอิงมาติด tags ตามใจเราก็ไม่ได้ ดังนั้นข้อมูลในส่วนนี้ รายงานหัวข้อ `Referrers` สามารถบอกเราได้อยู่แล้วว่ามาจาก URL ไหนบ้าง

แล้วเมื่อไหร่ที่เราควรใช้ UTM ?

1. อีเมลแคมเปญ (Email Campaigns)

คนส่วนใหญ่อ่านอีเมลผ่านโปรแกรมต่างๆ (Email Client) ไม่ว่าจะบน Desktop หรือ บทอุปกรณ์พกพาในปัจจุบัน ลิงค์ต่างๆ ที่คลิกผ่านโปรแกรมเหล่านั้นจะไม่ได้ส่ง Referrer มาให้ GA รับรู้ ดังนั้น UTM Parameters จะช่วยในการเก็บสถิติของผู้เยี่ยมชมว่ามาจากอีเมลฉบับใด หรือ คลิกผ่านลิงค์ส่วนใดบนอีเมลของเราได้ โดยรายละเอียดพวกนี้ผมจะมาขยายให้เห็นชัดขึ้นในตอนต่อๆ ไปนะครับ

2. โซเชียลแคมเปญ (Social Campaigns)

คล้ายๆ กับกรณีอีเมล ปัจจุบันเรามีโซเชียลมีเดียให้เล่นอยู่หลายตัว เอาเฉพาะที่ดังๆ เช่น Facebook, Twitter, Google+ ฯลฯ แล้วแต่ละตัวก็มีล้วนมี Application มาให้ใช้งานไม่ว่าจะเป็น Official App เองหรือจากผู้พัฒนาเจ้าอื่นๆ คลิกที่ผ่านการแชร์จาก Application เหล่านี้ไม่ได้ส่ง Referrer มาด้วยเช่นกัน ดังนั้น เราควรที่จะใส่ UTM เข้าไปในทุกๆ URL ที่เรานำไปแชร์ลงในโซเชียลมีเดียเพื่อให้แน่ชัดไปเลยว่าคนเข้าผ่านโซเชียลมีเดียตัวไหนกันแน่

3. แคมเปญที่จ่ายเงิน (Paid Campaigns)

แน่นอนเมื่อต้องจ่ายเงินไปกับการลงทุนโฆษณาไม่ว่าจะเป็นบน Ads Network ต่างๆ หรือ โฆษณาบน Facebook หรือ ซื้อพื้นที่แบนเนอร์ผ่านเจ้าของเว็บไซต์ดังๆ โดยตรง สถิติส่วนใหญ่ที่คุณจะได้จากผู้ให้บริการเหล่านี้คือ ยอดคลิกเท่าไหร่ ยอดคนเห็นแบนเนอร์เท่าไหร่ แต่…

• คุณไม่สามารถรับรู้ค่า Conversions จากตัวเลขเหล่านั้น เช่น คุณอยากรู้ว่าหลังจากคลิกเข้ามาผ่านแบนเนอร์แล้วมีคนทำรายการสั่งซื้อจนจบกี่ราย?
• การใช้ UTM สามารถช่วยให้เราวัดผลประสิทธิภาพของแคมเปญจ่ายเงินของเราผ่าน GA ได้ เช่น คุณสามารถเปรียบเทียบประสิทธิภาพของ แบนเนอร์บนเว็บไซต์ชื่อดัง กับ Facebook Ads ได้ หรือ แม่กระทั้งเปรียบเทียบกับ อีเมลแคมเปญหรือโซเชียลมีเดียแคมเปญก็ได้
• *** โดยเฉพาะ Google Adwords เราสามารถที่จะผูกบัญชีเข้ากับบัญชี GA ของเราทำให้สามารถดูสถิติและประสิทธิภาพของแคมเปญเราได้อย่างอัตโนมัติ (ซึ่งถ้ามีโอกาสจะมาเขียนให้อ่านในภายหลังนะครับ ไม่ขอสัญญา)

ถึงตรงนี้เราน่าจะจบพื้นฐานทั่วไปเกี่ยวกับการใช้งาน UTM Parameters กันแล้วนะครับ เดี๋ยวตอนหนังเราจะมาดูกันว่าเราควรนิยามหรือกำหนด tags ให้กับ parameters แต่ละตัวอย่างไรกัน

เรียนรู้การประยุคใช้งาน UTM Parameters กับ Google Analytics ฉบับเร่งด่วน ตอน 1

เริ่มจากทุกอย่างต้องมีที่มา

สำหรับคุณที่กำลังอ่านบทความนี้ของผม ผมขอเหมารวมเอาเองว่าทุกท่านรู้จักและคุ้นเคยกับ Google Analytics (ต่อไปจะขอเขียนย่อว่า GA) กันมาก่อนหน้าแล้ว และติดตั้ง GA Tracking Code ไว้แล้ว ไม่ว่าจะบนเว็บไซต์ของเราเองหรือเว็บไซต์ของลูกค้าที่เราดูแลอยู่ก็ตาม

ผมเชื่อว่าอย่างหนึ่งที่หลายคนต้องการรู้เป็นอันดับต้นๆ จากรายงานสถิติการเข้าเว็บ ก็คือ

“คนเข้าเยี่ยมชมเว็บเราเข้ามาจากช่องทางไหนกันบ้างหนอ?”

ข้อมูลในส่วนนี้เราสามารถที่จะจัดการบอกให้ GA เก็บข้อมูลเพิ่มเติมให้เราได้ ไม่ว่าจะเป็น แหล่งที่มา (soucce), สื่อประเภทต่างๆ (medium), ชื่อแคมเปญ (campaign name) หรือ ถ้าเราต้องการที่จะทำการเปรียบเทียบผลลัพท์ของสื่อที่แตกต่างกันก็ทำได้ โดยข้อมูลเหล่านี้จะช่วยให้เรารู้ชัดขึ้นมากกว่ารายงานแบบปกติที่ดูแล้วไม่ค่อยจะช่วยอะไรเราได้มากนัก

ทั้งนี้ ก่อนจะได้ข้อมูลที่เราต้องการ เราต้องออกแรงช่วย GA สำหรับการเก็บข้อมูลเหล่านี้เล็กน้อย ซึ่งจะมาว่ากันในตอนหลัง

เพื่อให้แน่ใจว่าแหล่งที่มาของผู้เยี่ยมชมมาจากแหล่งที่เราต้องการถูกต้องแน่นอน เรามาดูกันก่อนว่า GA นั้นตีความแหล่งที่มาจากไหนบ้าง

1. แหล่งอ้างอิง (Referrer)

ในขณะที่มีคนคลิกเข้ามาในเว็บไซต์ของเรา ตัวบราวเซอร์จะส่งค่า `Referrer URL` มาด้วย ทำให้ GA รู้ว่าผู้เยี่ยมชมรายนี้เข้ามาจากเว็บไซต์ไหน คุณสามารถลองเข้าไปดูรายงานได้ที่เมนู `การอ้างอิงทั้งหมด` (All Referrals)

แต่… เจ้า Referrer จะไม่ถูกส่งมาด้วย ถ้ามาจากแหล่งเหล่านี้นะครับ

• มาจาก Bookmarked
• มาจากการพิมพ์เองตรงๆ ผ่าน Address bar
• มาจาก Mobile App
• มาจากพวก Email Client ต่างๆ เช่น Outlook
• มาจากพวก Instant Messengers ต่างๆ เช่น Skype
• มาจากพวก Social Client ต่างๆ เช่น Twitter clients
• มาจากพวก link ในเอกสารต่างๆ เช่น PDF, MS Word, Powerpoint, etc.
• หรือมาจากอะไรก็ตามที่ระบุไม่ได้ว่าก่อนหน้านี้อยู่ที่เว็บไซต์ใด

ในกรณีเหล่านี้ เจ้า GA จะไม่รู้ได้ว่า Referrer URL มาจากไหน ในกรณีเหล่านี้ GA จะเหมารวมเอาข้อมูลไปรวมไว้ใน `Direct channel`

ดังนั้น เราจะทำอย่างไรดีเพื่อให้รู้ถึงแหล่งที่มาที่ถูกต้องจริงๆ? และนี้คือเหตุผลที่ต้องมีพระเอกของเรา`UTM Parameters`

2. UTM Parameters

`UTM Parameters`  คืออะไร? ให้มองว่ามันคือ tags ง่ายๆ ที่เราเอาไปต่อท้ายเข้ากับ URL เพื่อบอกแหล่งที่มาของผู้เยี่ยมชมให้ GA รู้ เมื่อใครซักคนคลิกบนลิงค์ `URL+UTM` ข้อมูล tags เหล่านั้นจะถูกส่งไปให้ GA สำหรับการ Tracking

ยกตัวอย่างโจทย์

สมมติว่าเราอยากรู้ว่ามีคนเข้ามาชม LDP (Landing Page) โปรโมชั่นประจำปีของเราจากการลิงค์ที่โพสท์แชร์บน Fan Page จำนวนเท่าไหร่และผ่าน Ads Facebook จำนวนเท่าไหร่ เราจะต้องทำ tags ที่ต่างกันเล็กน้อย หน้าตาของ `URL+UTM` จะออกมาประมาณนี้

- สำหรับ Post ลง Fan Page
http://www.yourdomain.com/bigsale2015.html?utm_source=facebook&utm_medium=pagepost&utm_campaign=BigSale2015——

- สำหรับ เป็น Destination URL ตอนซื้อ Ads Facebook
http://www.yourdomain.com/bigsale2015.html?utm_source=facebook&utm_medium=paidpost&utm_campaign=BigSale2015——

URL = “http://www.yourdomain.com/bigsale2015.html”

UTM = “ตัวสีฟ้าที่อยู่หลังเครื่องหมาย ?”

สำหรับค่าที่สามารถกำหนดให้ GA รับรู้ได้มี ดังนี้ครับ

• utm_campaign : เป็นค่าหลักที่ต้องกำหนด ใช้ระบุชื่อแคมเปญ
• utm_source : เป็นค่าหลักที่ต้องกำหนด ใช้ระบุแหล่งที่มา เช่น google, facebook, newsletter หรือ จาก source อื่นๆ
• utm_medium : เป็นค่าหลักที่ต้องกำหนด ใช้ระบุว่าเป็นสือไหน เช่น cpc, banner, email, ad_network ฯลฯ
• utm_content : ไม่จำเป็นต้องกำหนด ใช้สำหรับระบุ content ที่ต่างกันของสือ เช่น เราส่ง email หาลูกค้า อยากรู้ว่า email แบบ A กับ B แบบไหนคนคลิกมากกว่ากัน
• utm_term : ไม่จำเป็นต้องกำหนด ใช้ร่วมกับ paid search (AdWords)

หากเรากลับเข้าไปดูรายงานใน GA เราจะพบ ในส่วน `Acquisition >> All Traffic` หรือ `Acquisition >> Campaigns` มีข้อมูลตามที่เรากำหนดแสดงอยู่

พอจะเห็นภาพรวมๆ กันแล้วใช่หรือไม่ครับ ว่าเราสามารถปรับแต่ง UTM Parameters ได้ตามความเหมาะสม ขึ้นอยู่กับว่าเราต้องการจะเก็บข้อมูลอะไรเอาไว้ใช้งาน

แล้วเราควรที่จะใช้ UTM Parameters สำหรับทุกงานหรือไม่ หรือ เหมาะกับงานประเภทไหนดี? อันนี้เดี๋ยวเรามาว่ากันต่อตอนหน้านะครับ

Vagrant + puPHPet, ติดตั้ง Web Server สำหรับนักพัฒนาเว็บ ง่าย…ง่ายจริงๆ!!!

จะว่าไปแล้วนักพัฒนาเว็บยุคสมัยนี้โชคดี มีทางเลือกหลายๆ ทางในการที่จะจำลองเครื่อง Web Server ขึ้นมาสำหรับการพัฒนาเว็บฯ ไม่ว่าจะเป็นการ ติดตั้งบนเครื่องตัวเองด้วย package สำเร็จรูปอย่าง XAMPP, MAMP ฯลฯ หรือ จะลงบนเครื่อง VM (Virtual Machine) แทน กรณีนี้ก็ต้องออกแรงติดตั้ง package ต่างๆ เองอีก

แล้วถ้าเป็นนักพัฒนามือทองที่ต้องพัฒนาหลายๆ โปรเจคเข้าไปอีก แต่ละโปรเจคอาจต้องการ Dev Environments ที่ไม่เหมือนกัน ก็ต้องมานั้นเซต ปิดนู้น เปิดนี้ กันให้ปวดหัว (ในกรณีลงบน Local)

ทางออกก็เลยต้องหนีไปพัฒนาบน VM แทน แต่มันก็ยังไม่สะดวกสบายนักอยู่ดี เพราะนักพัฒนาก็ต้องมานั้นเซตนู้นนั้นนี้เองอยู่ดีนั้นแหละ เราเลยต้องใช้ Vagrant เข้ามาช่วยอีกแรง

Vagrant คืออะไร?

Vagrant เป็น tool ที่ช่วยให้เราสามารถติดตั้ง Virtual Machine บนเครื่องของเราได้อย่างง่ายดาย ตัดขั้นตอนที่นักพัฒนาต้องทำเองไปหลายอย่าง เช่น download iso ติดตั้ง OS ฯลฯ แถมยังสามารถ sync folder ในการพัฒนาให้เอง (ไม่ต้องเสียเวลา upload file ขึ้นเครื่อง VM)

โดยก่อนการใช้งาน Vagrant ในเครื่องเราต้องลง VirtualBox เอาไว้ก่อนแล้ว (จริงๆ Vagrant รองรับ VMWare ด้วย แต่ VirtualBox มันฟรีครับ) สามารถ Download VirtualBox ได้ที่ https://www.virtualbox.org/wiki/Downloads และอ่านวิธีติดตั้งที่ https://www.virtualbox.org/wiki/Documentation

หลังจากนั้นก็ Download Vagrant ที่ http://www.vagrantup.com/downloads.html

เมื่อติดตั้ง Vagrant ลงเครื่องเราเรียบร้อยแล้ว อยากให้อ่านและลองทำตามขั้นตอน ในหัวข้อ Getting Started ที่ทางเว็บ Vagrantup.com เตรียมเอาไว้ให้ก่อนนะครับ เป็น tutorial ที่ดีเลยทีเดียว

เมื่อลองเล่นจนเกิดความชำนาญ เราสามารถไป add boxes จากที่ http://www.vagrantbox.es/

puPHPet คืออะไร?

เป็น Web ที่ช่วยในการสร้างไฟล์ Vagrantfile script สำหรับติดตั้ง package ต่างๆ ที่จำเป็นสำหรับการพัฒนาเว็บ

โดยเข้าไปที่ https://puphpet.com/ แล้วจัดการเลือก option ตามที่เราต้องการ เสร็จแล้วก็ download ,จัดการแตกไฟล์ แล้ว นำไฟล์ และ โฟลเดอร์ที่ได้ ไปวางไว้ที่โฟลเดอร์ ที่เราต้องการจะติดตั้ง (ถ้าได้ลองทำตาม Getting Started มาจะเข้าใจดี) จากนั้นก็แค่สั่ง vagrant up แล้วก็รอๆๆ จนมันติดตั้ง และ อัพเดท ให้เราจนเสร็จ พร้อมใช้งาน

โพสท์นี้ขอแบบสั้นๆ ไม่ละเอียดนะครับ ช่วงนี้ไม่ว่างจริงๆ ^^’

สวัสดีครับ

ปรับแต่งหน้าตา Prompt ให้ Mac Terminal

โพสท์นี้เกิดจากความคันมือจากการไปดู tutorial ต่างๆ ของฝรั่งเขาแล้วเห็นหน้าตา Terminal หรือ Shell ที่เขาใช้มันดูโก้หรูดู Geeky มาก เลยอยากได้อยากมีกับเขาบ้าง… ด้วยความเป็น Mac OSX ที่ถือว่าเป็นญาติสนิทของ Unix ก็ว่าได้ ดังนั้นการปรับแต่งย่อมไม่ยาก

ดังนี้

** บทความนี้ใช้ได้ทั้ง Unix และ Mac

เปลี่ยนหน้าตา Command Prompt

ลำดับแรกเรามาเปลี่ยนหน้าตา Prompt กันก่อน โดยปกติหน้าตา prompt ของ Mac จะหน้าตาประมาณรูปด้านล่าง พอลอง echo $PS1 ออกมาดูก็จะ output แปลกๆ อันนี้เรียกว่า “prompt escapes”

เราสามารถเปลี่ยนรูปแบบ prompt escapes ได้เลยโดยใช้คำสั่ง export PS=”รูปแบบ prompt escapes ที่ต้องการ”

?

1	$ export PS1="\n\u ~> [\w]\n\$ "

จากตัวอย่าง ผมต้องการให้มีการ ขึ้นบรรทัดใหม่ (\n) เสมอเมื่อคำสั่งแสดงผลเสร็จ และ แสดงชื่อ user (\u) ที่ login จากนั้นก็แสดง path ที่ทำงานอยู่ ณ ปัจจุบันแบบเต็ม โดยให้อยู่ใน “[" "]” ([\w]) หลังจากนั้นก็ขึ้นบรรทัดใหม่และแสดง prompt เพื่อรับคำสั่งต่อไป (\n\$) หน้าตาก็จะได้อย่างรูปด้านล่าง

ตารางด้านล่างเป็น prompt escapes ทั้งหมดที่สามารถกำหนดได้ เราสามารถกำหนด prompt ของเราได้อย่างอิสระ

เปลี่ยนสีให้ Command Prompt

เพื่อให้แน่ใจว่า Terminal เปิดการใช้งาน ANSI colors อยู่หรือไม่ ให้เข้าไปดูที่ Terminal > Preferences… ตรง tab “Text” ให้เราไปเปิด Display ANSI colors ก่อน โดยการเลือกถูกด้านหน้า

สำหรับรูปแบบในการกำหนดสีของฝั่ง Mac และ ฝั่ง Linux จะต่างกันนิดหน่อยนะครับ

รูปแบบกำหนดสี prompt ของ Mac จะเป็น

?

1	\[\033[COLOR_CODE_HERE\]PROMPT_ESCAPE_OR_TEXT_HERE\[\033[0m\]

ส่วนฝั่ง Linux จะเป็น

?

1	\e[COLOR_CODE PROMPT_ESCAPE\e[0m

หากลองสังเกตดูจะเห็นว่ามี tag เปิด = \[\033[COLOR_CODE\] และ tag ปิด = \[\033[0m\] ชัดเจน

สำหรับตารางรหัสสีที่สามารถใช้ได้มีดังนี้

** TIP **

• เราสามารถ แก้ค่า 0; เป็น
  • 1; สำหรับตัวหนา
  • 4; ขีดเส้นใต้
  • 5; ตัวอักษรกระพริบ
  • 7; reverse เอาสีตัวอักษรมาเป็นสีพื้นหลัง
• เราสามารถกำหนดรูปแบบได้หลากหลายโดยใช้ ; ขั้น เช่น \[\033[1;4;31;33m\] = ตัวอักษรหนาขีดเส้นใต้สีแดงบนพื้นหลังสีเหลือง

หลังจากปรับแต่งรูปแบบและสีกันจนหนำใจแล้วก็อย่าลืม เอาไปเก็บไว้ในไฟล์ .bash_profile กันด้วยนะครับ

หลังจากนั่งมั่วเอาจนเหนื่อย command prompt ของผมก็ออกมาลิเกอย่างที่เห็นนี้แหละครับ อิอิ

สวัสดีครับ