이 문서에서는 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>