การตั้งค่า Adobe Flex

เอกสารนี้ครอบคลุมทุกอย่างที่จำเป็นต้องทราบในการตั้งค่าการติดตามของ Google Analytics สำหรับ Adobe Flash สำหรับสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ Adobe Flex

ดาวน์โหลดไลบรารีการติดตาม

ดาวน์โหลดรหัส (รูปแบบ ZIP) จาก http://code.google.com/p/gaforflash/downloads/list ทำตามวิธีการในไฟล์ readme.txt เพื่อติดตั้งคอมโพเนนต์ Flex ในการดาวน์โหลดจะมีไฟล์ไลบรารีเพียงไฟล์เดียว ซึ่งต่างจากคอมโพเนนต์ Flash ของ Analytics: /lib/analytics_flex.swc

เพิ่มโค้ดลงในโปรเจ็กต์ของคุณ

ก่อนที่จะเริ่มใช้โค้ดติดตามในโปรเจ็กต์ คุณจะต้องลิงก์ไฟล์ SWC ที่ดาวน์โหลดไว้เป็นทรัพยากรของโปรเจ็กต์

1. เลือกโปรเจ็กต์ -> พร็อพเพอร์ตี้ กล่องโต้ตอบ "คุณสมบัติ" สำหรับโปรเจ็กต์ของคุณจะปรากฏขึ้น
2. คลิกเส้นทางการสร้างแบบยืดหยุ่น แล้วเลือกแท็บเส้นทางไลบรารี
3. คลิกเพิ่ม SWC... ภายในแผงเส้นทางไลบรารี กล่องโต้ตอบ Add SWC จะปรากฏขึ้น
4. ไปที่ตำแหน่งที่คุณแตกซิปไฟล์ Google Analytics API แล้วเลือกไฟล์ lib/analytics.swc แล้วคลิกตกลง
   หรือวางไฟล์ analytics.swc ลงในไดเรกทอรี /libs ของโปรเจ็กต์ Flex

กลับไปด้านบน

ตัวอย่างคอมโพเนนต์ Flex MXML

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าการติดตามสำหรับปุ่มภายในไฟล์ MXML หากต้องการเริ่มต้นคอมโพเนนต์ MXML ให้ทำดังนี้

• ตั้งค่าพารามิเตอร์เนมสเปซ XML ตั้งค่าพารามิเตอร์ XML Namespace ของออบเจ็กต์การติดตามดังนี้ xmlns:analytics="com.google.analytics.components.*"
• ตั้งชื่อออบเจ็กต์ ในตัวอย่างด้านล่าง พารามิเตอร์ id ได้รับการตั้งค่าเป็น tracker
• ใช้พารามิเตอร์ account สำหรับรหัสเว็บพร็อพเพอร์ตี้ รหัสเว็บพร็อพเพอร์ตี้คือสตริงที่ไม่ซ้ำกันที่ใช้ในการติดตามกิจกรรมในเนื้อหา Flash ของคุณ และส่งไปยังข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) ที่ถูกต้องในบัญชี Analytics ของคุณ
• ตั้งค่าโหมดการติดตามด้วยพารามิเตอร์ mode ใช้ Bridge สำหรับพารามิเตอร์หากคุณกำลังสร้างไฟล์ MXML และต้องการวิธีง่ายๆ ในการใช้การติดตาม ใช้ AS3 หากคุณสะดวกที่จะเขียนโค้ดโดยใช้ ActionScript3 โหมด AS3 ช่วยให้คุณสามารถนำเข้าคลาสการติดตาม GA ทั้งหมด ซึ่งคุณสามารถสร้างและกำหนดค่าออบเจ็กต์การติดตามของคุณเองได้
• ตั้งค่าโหมดแก้ไขข้อบกพร่องด้วยพารามิเตอร์ visualDebug ใช้ true เพื่อเปิดการแก้ไขข้อบกพร่องและการตรวจสอบความถูกต้องสำหรับโปรแกรมของคุณ หรือตั้งค่านี้เป็น false สำหรับการใช้งานจริง

ในตัวอย่างนี้ มีการเพิ่มปุ่ม mybutton ลงในพื้นที่งาน ระบบจะสร้างอินสแตนซ์ของคอมโพเนนต์การติดตาม Flex ด้วยชื่อ tracker และกำหนดค่าด้วยพารามิเตอร์ของคอมโพเนนต์ดังกล่าว ขั้นตอนสุดท้าย มีการเพิ่มเหตุการณ์การคลิก onButtonClick ลงใน mybutton เมื่อคลิกปุ่ม ระบบจะเพิ่ม /hello world การดูหน้าเว็บเสมือนด้วยการนับครั้งเดียว

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="800" height="600"
    >

    <mx:Script>
            public function onButtonClick():void
            {
                tracker.trackPageview( "/hello world" );
            }
    </mx:Script>

    <analytics:FlexTracker
        xmlns:analytics="com.google.analytics.components.*"
        id="tracker"
        account="UA-111-222"
        mode="AS3"
        visualDebug="false"
     />

    <mx:Button id="mybutton" label="hello world" click="onButtonClick()" />

</mx:Application>

กลับไปด้านบน

ตัวอย่าง FlexAction 3

ในสถานการณ์ที่ซับซ้อนมากขึ้น คุณอาจต้องเรียกคลาสการติดตาม Screencast 3 แบบเนทีฟโดยตรงจากไฟล์ทรัพยากร ActionScript แม้ว่าตัวอย่างนี้เป็นไฟล์ MXML ด้วย แต่อินสแตนซ์การติดตามทั้งหมดจะดำเนินการในแท็ก <MX:script> กระบวนการเดียวกันนี้ใช้เพื่อเพิ่มการติดตามไปยังโปรเจ็กต์ ActionScript 3 อื่นๆ ได้

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

com.google.analytics.GATracker; //this is the actual tracking class
com.google.analytics.AnalyticsTracker; //this is an interface that the GATracker class implements

หลังจากนำเข้าไลบรารีแล้ว ระบบจะสร้างตัวแปรการติดตาม tracker เมื่อเพิ่มแอปพลิเคชันไปยังขั้นตอนแล้ว ระบบจะเรียกใช้ onComplete ซึ่งจะสร้างอินสแตนซ์การติดตาม พารามิเตอร์ 4 อย่างที่คุณต้องใช้ในการเริ่มต้นออบเจ็กต์ GATracker คือ

• อ้างอิงออบเจ็กต์การแสดงผลปัจจุบัน ในตัวอย่างด้านล่าง this จะอ้างอิงออบเจ็กต์การแสดงผล
• รหัสเว็บพร็อพเพอร์ตี้ รหัสเว็บพร็อพเพอร์ตี้คือสตริงที่ไม่ซ้ำกันที่ใช้ในการติดตามกิจกรรมในเนื้อหา Flash ของคุณ และส่งไปยังข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) ที่ถูกต้องในบัญชี Analytics ของคุณ
• โหมดการติดตาม พารามิเตอร์ที่ถูกต้องคือ Bridge หรือ AS3
• โหมดแก้ไขข้อบกพร่อง ตั้งค่า debug เป็น false สำหรับการใช้งานจริงและ true สำหรับการตรวจสอบความถูกต้องและการแก้ปัญหา

สุดท้าย ในเมธอดการคลิก myButton ฟังก์ชัน onButtonClick จะติดตามการเปิดดูหน้าเว็บเสมือนในออบเจ็กต์การติดตามของเรา

เมื่อแอปพลิเคชันนี้ทำงาน ทุกครั้งที่ผู้ใช้คลิกปุ่ม ระบบจะส่งการดูหน้าเว็บเสมือนของคำว่า "hello world" ไปยังเซิร์ฟเวอร์การติดตามของ Google Analytics

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="800" height="600"
    addedToStage="onComplete()"
    >
    <mx:Script>
        <![CDATA[
            import com.google.analytics.GATracker;
            import com.google.analytics.AnalyticsTracker;

            public var tracker:AnalyticsTracker;

            private function onComplete():void
            {
                tracker = new GATracker( this, "UA-111-222", "AS3", false );
            }

            public function onButtonClick():void
            {
                tracker.trackPageview( "/hello/world" );
            }

        ]]>
    </mx:Script>

    <mx:Button id="mybutton" label="hello world" click="onButtonClick()" />

</mx:Application>

กลับไปด้านบน