Penyiapan Adobe Flex

Dokumen ini mencakup semua hal yang perlu Anda ketahui untuk menyiapkan Pelacakan Google Analytics untuk Adobe Flash untuk lingkungan pengembangan Adobe Flex.

Mendapatkan Library Pelacakan

Unduh kode (format ZIP) dari http://code.google.com/p/gaforflash/downloads/list. Ikuti petunjuk dalam file readme.txt untuk menginstal komponen Flex. Tidak seperti komponen Flash Analytics, hanya ada satu file library yang berada di download: /lib/analytics_flex.swc.

Menambahkan Kode ke Project Anda

Sebelum dapat mulai menggunakan kode pelacakan di project, Anda harus menautkan file SWC yang didownload sebagai resource project.

  1. Pilih Project->Properties. Kotak dialog Properties akan muncul untuk project Anda.
  2. Klik Flex Build Path, lalu pilih tab Library Path.
  3. Klik Add SWC... di dalam panel Library Path. Kotak dialog Tambahkan SWC akan muncul.
  4. Buka lokasi tempat Anda mengekstrak Google Analytics API dan pilih file lib/analytics.swc, lalu klik OK.
    Atau, cukup lepaskan file analytics.swc ke direktori /libs project Flex Anda.

Contoh Komponen MXML Flex

Contoh berikut menunjukkan cara menyiapkan pelacakan untuk tombol di dalam file MXML. Untuk melakukan inisialisasi komponen MXML, lakukan hal berikut:

  • Menetapkan parameter namespace XML. Tetapkan parameter namespace XML objek pelacakan Anda sebagai berikut: xmlns:analytics="com.google.analytics.components.*"
  • Menetapkan nama objek. Pada contoh di bawah, parameter id disetel ke tracker.
  • Gunakan parameter account untuk ID properti web. ID properti web adalah string unik yang digunakan untuk melacak aktivitas di konten Flash dan mengirimkannya ke tampilan (profil) yang benar di akun Analytics Anda.
  • Tetapkan mode pelacakan dengan parameter mode. Gunakan Bridge untuk parameter jika Anda membuat file MXML dan menginginkan cara yang mudah untuk menerapkan pelacakan. Gunakan AS3 jika Anda merasa nyaman melakukan coding menggunakan BoM3. Mode AS3 memungkinkan Anda mengimpor semua kelas pelacakan GA, tempat Anda dapat membuat dan mengonfigurasi objek pelacakan Anda sendiri.
  • Tetapkan mode debug dengan parameter visualDebug. Gunakan true untuk mengaktifkan proses debug dan validasi untuk program Anda; jika tidak, tetapkan parameter ini ke false untuk penggunaan produksi.

Dalam contoh, tombol mybutton ditambahkan ke bidang. Komponen pelacakan Flex dibuat instance-nya dengan nama tracker dan dikonfigurasi dengan parameternya. Terakhir, peristiwa klik onButtonClick ditambahkan ke mybutton. Saat tombol diklik, kunjungan halaman virtual /hello world akan bertambah dengan satu jumlah. 

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

Contoh FlexJavaScript 3

Pada situasi yang lebih rumit, Anda dapat memanggil kelas pelacakan nativeerasa 3 langsung dari file sumber daya bernasehat kamu. Meskipun contoh ini juga merupakan file MXML, semua pembuatan instance pelacakan dilakukan di tag <MX:script>. Proses yang sama ini dapat digunakan untuk menambahkan pelacakan ke proyek BoM 3 lainnya.

Dalam contoh ini, tombol mybutton ditambahkan ke stage. Dalam tag skrip, dua library diimpor: 

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

Setelah library diimpor, variabel pelacakan tracker akan dibuat. Setelah aplikasi ditambahkan ke stage, onComplete akan dipanggil, yang akan membuat instance objek pelacakan. Empat parameter yang Anda perlukan untuk membuat instance objek GATracker adalah:

  • Referensikan objek tampilan saat ini. Dalam contoh di bawah, this mereferensikan objek tampilan.
  • ID properti web. ID properti web adalah string unik yang digunakan untuk melacak aktivitas di konten Flash dan mengirimkannya ke tampilan (profil) yang benar di akun Analytics Anda.
  • Mode pelacakan. Parameter yang valid adalah Bridge atau AS3.
  • Mode debug. Tetapkan debug ke false untuk penggunaan produksi dan ke true untuk validasi dan pemecahan masalah.

Terakhir, pada metode klik myButton, fungsi onButtonClick melacak tayangan halaman virtual pada objek pelacakan kita.

Saat aplikasi ini berjalan, setiap kali pengguna mengklik tombol, tayangan halaman virtual "hello world" akan dikirim ke server pelacakan 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>