Thiết lập Adobe Flex

Tài liệu này bao gồm mọi thông tin bạn cần biết để thiết lập tính năng Theo dõi Google Analytics cho Adobe Flash trong môi trường phát triển Adobe Flex.

Tải Thư viện theo dõi

Tải xuống mã (định dạng ZIP) từ http://code.google.com/p/gaforflash/downloads/list. Làm theo hướng dẫn trong tệp readme.txt để cài đặt thành phần Flex. Không giống như các thành phần Flash của Analytics, chỉ có một tệp thư viện nằm trong tệp tải xuống: /lib/analytics_flex.swc.

Thêm mã vào dự án của bạn

Trước khi có thể bắt đầu sử dụng mã theo dõi trong dự án, bạn cần liên kết tệp SWC mà bạn đã tải xuống dưới dạng một tài nguyên của dự án.

1. Chọn Project->Properties (Dự án -> Thuộc tính). Hộp thoại Properties (Thuộc tính) sẽ xuất hiện cho dự án của bạn.
2. Nhấp vào Flex Build Path (Đường dẫn bản dựng linh hoạt) rồi chọn thẻ Library Path (Đường dẫn thư viện).
3. Nhấp vào Add SWC... (Thêm SWC...) trong ngăn Library Path (Đường dẫn thư viện). Hộp thoại Thêm SWC sẽ xuất hiện.
4. Chuyển đến vị trí bạn đã giải nén API Google Analytics, chọn tệp lib/analytics.swc rồi nhấp vào OK.
   Hoặc bạn chỉ cần thả tệp analytics.swc vào thư mục /libs của dự án Flex.

Trở lại đầu trang

Ví dụ về thành phần Flex MXML

Ví dụ sau đây trình bày cách thiết lập theo dõi cho một nút bên trong tệp MXML. Để khởi chạy thành phần MXML, hãy làm như sau:

• Đặt tham số không gian tên XML. Hãy đặt tham số không gian tên XML của đối tượng theo dõi như sau: xmlns:analytics="com.google.analytics.components.*"
• Đặt tên đối tượng. Trong ví dụ bên dưới, tham số id được đặt thành tracker.
• Sử dụng tham số account cho mã thuộc tính web. ID thuộc tính web là chuỗi duy nhất được sử dụng để theo dõi hoạt động trên nội dung Flash và phân phối nó đến chế độ xem (hồ sơ) chính xác trong tài khoản Analytics của bạn.
• Đặt chế độ theo dõi bằng tham số mode. Sử dụng Bridge cho tham số nếu bạn đang tạo tệp MXML và muốn có một cách đơn giản để triển khai tính năng theo dõi. Sử dụng AS3 nếu bạn thoải mái lập trình bằng ActionScript3. Chế độ AS3 cho phép bạn nhập tất cả các lớp theo dõi GA, từ đó bạn có thể tạo và định cấu hình đối tượng theo dõi của riêng mình.
• Đặt chế độ gỡ lỗi bằng tham số visualDebug. Sử dụng true để bật tính năng gỡ lỗi và xác thực cho chương trình của bạn; nếu không, hãy đặt giá trị này thành false để sử dụng cho phiên bản phát hành công khai.

Trong ví dụ này, nút mybutton được thêm vào vùng hiển thị. Thành phần theo dõi linh hoạt được tạo thực thể với tên tracker và định cấu hình bằng các tham số của thành phần đó. Cuối cùng, sự kiện nhấp chuột onButtonClick được thêm vào mybutton. Khi người dùng nhấp vào nút này, số lượt xem trang ảo /hello world sẽ tăng lên với một lần đếm.

<?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>

Trở lại đầu trang

Ví dụ về Flex ActionScript 3

Trong các trường hợp phức tạp hơn, bạn có thể muốn gọi các lớp theo dõi ActionScript 3 gốc trực tiếp từ tệp tài nguyên ActionScript 3. Mặc dù ví dụ này cũng là một tệp MXML, nhưng tất cả việc tạo bản sao theo dõi đều được thực hiện trong các thẻ <MX:script>. Bạn có thể sử dụng cùng một quy trình này để thêm tính năng theo dõi vào các dự án ActionScript 3 khác.

Trong ví dụ này, nút mybutton được thêm vào vùng hiển thị. Trong thẻ tập lệnh, 2 thư viện được nhập:

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

Sau khi nhập thư viện, biến theo dõi tracker sẽ được tạo. Sau khi thêm ứng dụng vào giai đoạn, onComplete sẽ được gọi để tạo thực thể của đối tượng theo dõi. Bốn thông số bạn cần để tạo thực thể cho đối tượng GATracker là:

• Tham chiếu đến đối tượng hiển thị hiện tại. Trong ví dụ dưới đây, this tham chiếu đến đối tượng hiển thị.
• Mã tài sản web. ID thuộc tính web là chuỗi duy nhất được sử dụng để theo dõi hoạt động trên nội dung Flash và phân phối nó đến chế độ xem (hồ sơ) chính xác trong tài khoản Analytics của bạn.
• Chế độ theo dõi. Các thông số hợp lệ là Bridge hoặc AS3.
• Chế độ gỡ lỗi. Thiết lập debug thành false để dùng cho phiên bản công khai và thành true để xác thực và khắc phục sự cố.

Cuối cùng, trong phương pháp nhấp chuột myButton, hàm onButtonClick theo dõi số lượt xem trang ảo trên đối tượng theo dõi của chúng ta.

Khi ứng dụng này chạy, mỗi lần người dùng nhấp vào nút này, một lượt xem trang ảo "xin chào thế giới" sẽ được gửi đến các máy chủ theo dõi của 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>

Trở lại đầu trang