Google Analytics에서 Adobe Flash 추적하기

Adobe Flash용 Google 애널리틱스 추적 구성요소를 사용하면 플래시 기반 콘텐츠에서 Google 애널리틱스를 쉽게 구현할 수 있습니다. Adobe Systems, Inc.에서 개발한 이 구성요소에는 Google 애널리틱스 자바스크립트 코드의 모든 기능이 포함되어 있습니다. 플래시 추적 구성요소는 액션스크립트 3에서 기본으로 제공되는 컴파일된 추적 객체로 플래시 및 Flex 개발 환경에서 직관적으로 애널리틱스를 구현할 수 있게 해줍니다.

플래시 추적을 사용해야 하는 이유

Google Analytics에서 Adobe Flash를 추적하지 않을 경우 Google Analytics로 Adobe Flash 콘텐츠를 추적하려면 많은 기술적 문제가 발생합니다. 먼저 플래시 애플리케이션에서 trackPageview() 또는 trackEvent()와 같은 적절한 애널리틱스 메서드를 실행할 수 있도록 ga.js에 대한 맞춤 인터페이스를 개발해야 합니다. 또한 플래시 콘텐츠가 브라우저 DOM (Document Object Model)에 액세스할 수 있는지도 예상해야 합니다. DOM 액세스가 거부된 경우 (일반적으로 콘텐츠가 제3자 사이트에 있는 경우)에 대한 추적은 실패하기 때문입니다. 이를 위해서는 액션스크립트 3에서 ExternalInterface 호출을 사용하여 브라우저 DOM에 액세스하고 액세스가 거부되었을 때 성능을 저하시키는 방법을 이해해야 합니다.

Adobe Flash용 Google Analytics를 이용하면 간편하게 플래시 콘텐츠를 추적하고 DOM 액세스를 처리할 수 있습니다. 이 속성은 다음과 같이 플래시의 여러 일반적인 추적 용도로 유용합니다.

  • HTML 페이지에 삽입된 Flash 위젯
  • 독립형 Flex 응용프로그램 또는 HTML 페이지에서 호스팅되는 Flash 전용 사이트
  • 개발자가 위젯 위치를 통제할 수 없는 Flex/Flash 게임 또는 프로그램 배포 버전

플래시의 추적 애플리케이션에는 추적 웹사이트 페이지의 구조와 약간의 구조적 차이가 있습니다. 이 플러그인의 작동 방식을 이해하려면 애널리틱스 추적에 대한 기본 지식이 필요합니다. 또한 이 프로젝트의 설계 문서에서 애널리틱스 추적 모델이 이 구성요소에 어떻게 이전되었는지 자세히 알아볼 수 있습니다.

참고: 현재 플래시 추적은 웹페이지에 삽입된 모든 플래시 콘텐츠에 사용할 수 있습니다. Adobe Air, Shockwave 또는 Flash IDE (예: Test Movie 사용)를 통해 전송된 데이터의 추적은 현재 지원되지 않습니다.

지원되는 개발 환경

Adobe Flash 또는 Adobe Flex 환경에서 플래시에 대한 애널리틱스 추적을 개발할 수 있습니다. 환경마다 다른 구성요소가 필요하며 http://code.google.com/p/gaforflash/에서 다운로드할 수 있습니다. 이러한 구성요소는 액션스크립트 3을 기반으로 하며 각 환경에 대해 다음 두 가지 방법 중 하나로 설정할 수 있습니다.

Adobe Flash의 경우

  • 요소 검사기에서 간단한 구성요소를 추가 및 구성하고 스테이지로 드래그합니다.
  • 플래시 추적 라이브러리를 라이브러리로 직접 가져와서 코딩을 시작합니다.

Adobe Flex의 경우

  • am MXML 파일에서 구성하는 MXML 구성요소를 포함합니다.
  • 플래시 추적 라이브러리를 스크립트 태그/AS3 파일로 가져옵니다.

구성요소는 어떻게 작동하나요?

사용자 환경에서 플래시 추적 요소를 사용하려면 플래시 내에서 시각적 도구를 사용하거나 코드에서 직접 추적 개체를 설정해야 합니다. 구성요소를 시각적으로 또는 코드를 통해 설정하는지에 관계없이 다음 요소를 제공합니다.

  • 웹 속성 ID: 추적 코드의 UA 번호라고도 하며 UA-xxxxx-yy와 같은 형태입니다. 여기서 x와 y는 추적 중인 객체의 계정 및 보기 (프로필) 정보에 해당하는 숫자로 대체됩니다. 자세한 내용은 웹 속성을 참조하세요.
  • 추적 모드: 브리지 모드 또는 AS3 모드를 선택합니다. 이 모드는 추적이 애널리틱스 서버와 통신하는 방식을 결정하며, 아래에 자세히 설명되어 있습니다.
  • 디버깅 모드: 사용 중인 환경이나 추적 모드에 관계없이 디버깅을 사용 설정하여 추적을 검증하고 테스트할 수 있습니다.

추적 모드

플래시 콘텐츠를 배포하는 방법에 따라 플래시용 애널리틱스 구성요소는 기존 애널리틱스 추적 설치에서 플래시 콘텐츠와의 통신을 연결하거나 애널리틱스 서버와 직접 통신하여 애널리틱스 서버와 통신합니다. 이 두 모드를 각각 브리지 모드AS3 모드라고 합니다. 두 모드 모두 동일한 애널리틱스 추적 기능을 사용하며 플래시 애플리케이션을 한 모드에서 다른 모드로 쉽게 전환할 수 있습니다. 애널리틱스 추적에 사용할 통신 모드를 선택하는 것 외에도 디버그 모드를 사용하여 추적 관련 문제를 해결하거나 추적 상태를 확인할 수 있습니다.

캠페인 추적이 작동하려면 어느 모드에서든 allowscriptaccessalways와 같아야 합니다. 이 매개변수는 플래시 추적 코드에 필요한 페이지의 URL 및 리퍼러 정보에 대한 읽기 액세스를 사용 설정합니다. allowscriptaccess가 없으면 애널리틱스 추적 코드의 성능이 단계적으로 저하됩니다. 대부분의 사용자 활동 데이터는 여전히 제공하지만 Google 애널리틱스 캠페인 기여 분석 모델에는 확인되지 않습니다.

브리지 모드

HTML 페이지 플래시 콘텐츠를 모두 제어하는 경우 이 모드를 사용합니다. 이 모드는 웹사이트에 이미 Google 애널리틱스 (ga.js) 추적이 구현되어 있고 삽입된 플래시 콘텐츠에 추적을 추가하려는 경우에 가장 적합합니다. 브리지 모드는 ga.js 코드에 통합 액션스크립트 3 인터페이스를 제공하여 Flash와 자바스크립트 간 통신을 간소화합니다. 추적이 작동하도록 액션스크립트 3 호출로부터 애널리틱스 자바스크립트에 대한 연결을 제공합니다.

Google 애널리틱스 추적 코드에 대한 연결은 다음 두 가지 방법 중 하나로 웹 속성 ID 매개변수를 통해 구성할 수 있습니다.

  • 가장 일반적인 방법입니다. 페이지에 이미 고유 이름으로 Google 애널리틱스 추적 코드 객체가 있습니다(예: pageTracker). 이 경우 추적 객체에 전체 DOM 참조를 제공합니다. 예를 들어 객체가 pageTracker이라고 하는 경우 코드에서 이 객체를 window.pageTracker로 참조합니다. 예를 들어 다음 코드 스니펫은 액션스크립트 3과 함께 Adobe Flex 환경을 사용하여 구성되는 방법을 보여줍니다.
    tracker = new GATracker( this, "window.pageTracker", "Bridge", false );

  • 대체 방법 페이지에 페이지 추적 객체를 만들지 않은 경우 웹 속성 ID를 전달하기만 하면 자바스크립트 추적 코드 객체가 자동으로 생성됩니다. 이 메서드를 사용할 때도 HTML 페이지에 기본 ga.js 자바스크립트 소스 파일을 참조해야 합니다. 다음 코드 스니펫은 Adobe Flex 환경에서 ActionScript 3을 사용하여 이를 구성하는 방법을 보여줍니다.
    tracker = new GATracker( this, "UA-12345-22", "Bridge", false );

브리지 모드가 올바르게 작동하려면 액션스크립트 3 코드에서 ExternalInterface.available를 true로 설정해야 합니다. 또한 Flash 콘텐츠가 삽입된 HTML 페이지에서 allowScriptAccessalways로 설정해야 합니다. 다음 예는 브리지 모드용으로 구성된 HTML 코드를 보여줍니다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
     id="flex_component" width="800" height="600"
     codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
     <param name="movie" value="flex_component.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#869ca7" />
     <param name="allowScriptAccess" value="always" />
     <embed src="flex_component.swf" quality="high" bgcolor="#869ca7"
         width="800" height="600" name="flex_component" align="middle"
         play="true"
         loop="false"
         quality="high"
         allowScriptAccess="always"
         type="application/x-shockwave-flash"
         pluginspage="http://www.adobe.com/go/getflashplayer">
      </embed>
</object>

 

AS3 모드

Adobe Flash 액션스크립트 3 코드를 제어하지만 Adobe Flash 애플리케이션의 호스팅 환경은 제어하지 않는 경우 이 모드를 사용합니다. 예를 들어 여러 사이트에 배포할 플래시 콘텐츠를 개발하는 경우 AS3 모드를 사용합니다. AS3 모드는 ga.js 추적 코드와 완전히 별개이며 모든 애널리틱스 추적 기능을 포함합니다. 이 모드를 사용하면 별도의 ga.js 추적 설치가 필요하지 않습니다. 또한 AS3 모드는 플래시 저장 메커니즘을 사용하여 사용자의 세션 정보를 추적합니다.

언어와 같은 특정 DOM 매개변수의 경우 AS3 구성요소가 브라우저에서 값을 가져오려고 시도합니다. 이 값이 없으면 구성요소는 플래시에 상응하는 값을 사용하거나 기본값을 no로 설정합니다.

문제 해결 및 유효성 검사

Adobe Flash용 Google 애널리틱스 추적 구성요소는 디버그 모드를 제공하여 유효성 검사와 문제 해결을 단순화합니다. 사용 설정하면 모든 추적 데이터를 가로채 애널리틱스 서버 대신 텍스트 상자 내의 화면으로 보냅니다. 이 모드에서는 서버에서 수집하는 데이터를 실시간으로 확인할 수 있습니다. 이 기능은 테스트 데이터를 프로덕션 데이터 외부에 보관하는 데도 도움이 됩니다. 구성요소 검사기에서 visualDebug 옵션을 true로 설정하여 문제 해결 기능을 사용 설정할 수 있습니다.

다양한 개발 환경에서 추적을 구현하는 방법에 대한 자세한 예는 다음을 참고하세요.

플래시

Flex

버전 관리

추적 구성요소의 최신 버전은 http://code.google.com/p/gaforflash/downloads/list에서 ZIP 파일로 받을 수 있습니다. 각 다운로드에는 모든 추적 구성요소와 관련 문서가 포함되어 있습니다. 다운로드 파일의 파일 이름에 포함된 코드의 버전 번호가 표시됩니다.

코드에서 다음 문을 사용하여 구성요소의 현재 버전 번호를 출력 콘솔에 출력할 수도 있습니다.

import com.google.analytics.API;
trace(API.version);