Google Analytics by hooking

Google Analytics ความต้องการจริง ๆ สำหรับคนทั่วไป อาจจะแค่อยากเอาโค้ดไปแปะที่เว็บไซต์เท่านั้นเอง ถ้าโหลดปลั๊กอินมาใช้ ก็จะมีลูกเล่นอื่น ๆ ตามมาอีกมากมาย ซึ่งค่อนข้างเกินความจำเป็น และทำให้เว็บไซต์หนัก

สำหรับคนที่ต้องการแค่อยากเอาโค้ดของ Google Analytics ไปแปะไว้ที่บนหัวของเว็บไซต์ในส่วน <head> เราสามารถเขียนโค้ดเพื่อแทรกคำสั่งไปได้ เรียกกว่าการ Hook

ในการพัฒนาธีม หรือ การสร้างปลั๊กอิน จะมีฟังก์ชั่นการทำงานอยู่ 2 ประเภทที่สามารถเขียนเพิ่มเข้าไปในเวิร์ดเพรสได้นั่นคือ Action และ Filter ทั้งสองอย่างนี้มีการทำงานที่คล้ายกันแต่แตกต่างกันที่รูปแบบการใช้งาน ดังนี้

Action คือ การกระทำ จะทำงานเกี่ยวกับการดำเนินการเมื่อต้องการทำอะไรสักอย่างเพิ่มเข้าไปในเวิร์ดเพรส เช่น ต้องการ หยุดการแจ้งเตือนต่าง ๆ ในหน้าแอดมิน

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

ถ้าหากจะให้พูดถึงรายละเอียดการสร้าง Google Analytics หรือการ Hooks ก็จะผิดวัตถุประสงค์ของบทความนี้ไป ผมจึงขอเขียนถึงแค่วิธีนำโค้ด Google Analytics ไปไว้ที่ส่วนหัวของเว็บไซต์ โดยการใช้ Action ไปที่ wp_head เลยแล้วกันครับ

ขั้นตอนการ Hook

สร้าง Plugin ที่ชื่อว่า Nann Google Analytics ขึ้นมา

<?php
/*
Plugin Name: Nann Google Analytics

เพิ่มรายละเอียดเข้าไปอีกนิดหน่อยว่าใครเป็นคนสร้าง และเกี่ยวกับอะไร

Plugin URI: https://www.nannstudio.com/
Description: Adds a Google analytics trascking code to the <head> of your theme, by hooking to wp_head.
Author: Chalermchai "Nann" Prompunya
Author URI: https://www.facebook.com/nannchalermchai
Version: 1.0
 */

จากนั้นเซฟไฟล์ชื่อว่า nann-ga.php ไปไว้ที่ /wp-content/plugins/

ทดสอบดูว่าปลั๊กอินมาแล้วหรือยัง

มีคนเคยกล่าวเอาไว้ว่า “โปรแกรมที่ไม่มีบัก คือโปรแกรมที่ยังไม่ได้สร้าง” เป็นไปตามนั้นครับ ฮ่า ๆ

ทำไมถึงสร้างเป็นปลั๊กอินแทนที่จะเขียนเพิ่มใน function.php ของธีมเพิ่มเอา เพราะว่าผมอยากให้มันติดอยู่ในส่วน <head> ตลอดไม่ว่าเราจะเปลี่ยนไปใช้ธีมไหนก็ตาม

เริ่มต้นการ Hook

การที่จะนำอะไรไปไว้ที่ <head> ได้นั้นต้อง Action ไปยัง wp_head เพื่อให้เวิร์ดเพรสรู้ว่าเรากำลังจะกระทำอะไรบางอย่างไปที่ <head> มาเริ่มกันเลยครับ

โครงสร้าง

<?php
    add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 );
?>

นำมาประยุกต์ใช้ เพื่อให้สามารถวางโค้ดของ Google Analytics ได้ง่าย

<?php
    function nann_ga () { ?>

        <!-- Past Code Google Analytics -->

<?php }
add_action( 'wp_head', 'nann_ga', 10 );

หมายเหตุ: ที่ใช้คอมเม้นโค้ดแบบ <!– Comment –> เพราะส่วนนั้นสามารถวาง html code ได้

เมื่อนำ Google Analytics ไปวางแทนที่ <!– Past Code Google Analytics –> จะได้แบบนี้

<?php
function nann_ga () { ?>
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)}, i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-12345678-1', 'auto');
            ga('send', 'pageview');

    </script>
<?php }
add_action( 'wp_head', 'nann_ga', 10 );

จากนั้นกด Save และไป Active Plugin เพื่อทดสอบการใช้งาน