Adobe Flex 설정

이 문서에서는 Adobe Flex 개발 환경을 위해 Adobe Flash에 대한 Google 애널리틱스 추적을 설정하기 위해 알아야 할 모든 사항을 다룹니다.

추적 라이브러리 다운로드

http://code.google.com/p/gaforflash/downloads/list에서 코드 (ZIP 형식)를 다운로드합니다. readme.txt 파일의 안내에 따라 Flex 구성요소를 설치합니다. 애널리틱스 플래시 구성요소와 달리 다운로드에는 라이브러리 파일(/lib/analytics_flex.swc)이 하나만 있습니다.

프로젝트에 코드 추가

프로젝트에서 추적 코드를 사용하려면 먼저 프로젝트 리소스로 다운로드한 SWC 파일을 연결해야 합니다.

Project->Properties를 선택합니다. 프로젝트에 대한 Properties 대화상자가 나타납니다.
Flex Build Path를 클릭하고 Library Path 탭을 선택합니다.
Library Path 창에서 Add SWC...를 클릭합니다. Add SWC 대화상자가 나타납니다.
Google 애널리틱스 API의 압축을 푼 위치로 이동하여 lib/analytics.swc 파일을 선택하고 확인을 클릭합니다.
또는 analytics.swc 파일을 Flex 프로젝트 /libs 디렉터리에 드롭합니다.

맨 위로

Flex MXML 구성요소 예

다음 예는 MXML 파일 내 버튼에 대한 추적을 설정하는 방법을 보여줍니다. MXML 구성요소를 초기화하려면 다음 단계를 따르세요.

XML 네임스페이스 매개변수를 설정합니다. 추적 객체의 XML 네임스페이스 매개변수를 다음과 같이 설정합니다. xmlns:analytics="com.google.analytics.components.*"
객체 이름을 설정합니다. 아래 예에서 id 매개변수는 tracker로 설정되어 있습니다.
웹 속성 ID에 account 매개변수를 사용합니다. 웹 속성 ID는 플래시 콘텐츠에서 발생한 활동을 추적하고 이를 애널리틱스 계정의 올바른 보기 (프로필)에 전달하는 데 사용되는 고유한 문자열입니다.
mode 매개변수를 사용하여 추적 모드를 설정합니다. MXML 파일을 만들고 추적을 구현하는 간단한 방법을 원하면 매개변수로 Bridge를 사용하세요. 액션스크립트3을 사용하여 코딩하는 데 익숙하다면 AS3를 사용하세요. AS3 모드를 사용하면 모든 GA 추적 클래스를 가져올 수 있으며, 이 클래스에서 추적 객체를 직접 만들고 구성할 수 있습니다.
visualDebug 매개변수로 디버그 모드를 설정합니다. true를 사용하여 프로그램의 디버깅 및 유효성 검사를 사용 설정합니다. 그렇지 않으면 프로덕션 용도로 false로 설정합니다.

이 예에서는 mybutton 버튼이 스테이지에 추가되었습니다. 가변형 추적 구성요소는 tracker라는 이름으로 인스턴스화되고 매개변수를 사용하여 구성됩니다. 마지막으로 클릭 이벤트 onButtonClick가 mybutton에 추가됩니다. 버튼을 클릭하면 가상 페이지뷰(/hello world)가 1회로 증가합니다.

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

맨 위로

Flex 액션스크립트 3 예

좀 더 복잡한 상황에서는 기본 액션스크립트 3 추적 클래스를 액션스크립트 리소스 파일에서 직접 호출하는 것이 좋습니다. 이 예도 MXML 파일이지만 모든 추적 인스턴스화는 <MX:script> 태그에서 이루어집니다. 동일한 과정을 통해 다른 액션스크립트 3 프로젝트에 추적을 추가할 수 있습니다.

이 예에서는 mybutton 버튼이 스테이지에 추가되었습니다. 스크립트 태그에서 다음 두 개의 라이브러리를 가져옵니다.

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가 호출됩니다. GATracker 객체를 인스턴스화하는 데 필요한 네 가지 매개변수는 다음과 같습니다.

현재 표시 객체를 참조합니다. 아래 예에서 this는 표시 객체를 참조합니다.
웹 속성 ID. 웹 속성 ID는 플래시 콘텐츠에서 발생한 활동을 추적하고 이를 애널리틱스 계정의 올바른 보기 (프로필)에 전달하는 데 사용되는 고유한 문자열입니다.
추적 모드. 유효한 매개변수는 Bridge 또는 AS3입니다.
디버그 모드 프로덕션 용도로 debug를 false로 설정하고 유효성 검사 및 문제 해결을 위해 true로 설정합니다.

마지막으로 myButton 클릭 메서드에서 onButtonClick 함수는 추적 객체의 가상 페이지 조회를 추적합니다.

이 애플리케이션이 실행되면 사용자가 버튼을 클릭할 때마다 'hello world'의 가상 페이지뷰가 Google 애널리틱스 추적 서버로 전송됩니다.

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

맨 위로