Adobe Flash에 대한 Google 애널리틱스 추적

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

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

Adobe Flash에 대한 Google 애널리틱스 추적 기능이 없는 경우 Google 애널리틱스를 사용하여 Adobe Flash 콘텐츠를 추적하려면 여러 가지 기술적 문제가 발생하게 됩니다. 먼저 플래시 애플리케이션이 trackPageview() 또는 trackEvent()와 같은 적절한 애널리틱스 메서드를 실행할 수 있도록 ga.js에 대한 맞춤 인터페이스를 개발해야 합니다. 또한 DOM 액세스가 거부된 객체 (일반적으로 콘텐츠가 타사 사이트에 있는 경우)에 대한 추적이 실패하므로 플래시 콘텐츠에 브라우저 문서 객체 모델 (DOM)에 대한 액세스 권한이 있어야 합니다. 이렇게 하려면 클래스룸 3에서 ExternalInterface 호출을 사용하여 브라우저 DOM에 액세스하고 액세스가 거부되면 성능 저하하는 방법을 이해하는 것이 포함됩니다.

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

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

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

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

지원되는 개발 환경

Adobe Flash 또는 Adobe Flex 환경에서 Flash용 애널리틱스 추적을 개발할 수 있습니다. 각 환경에는 다른 구성요소가 필요하며 http://code.google.com/p/gafor플래시/에서 다운로드할 수 있습니다. 이러한 구성요소는 액션스크립트 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 인터페이스를 제공하여 플래시-자바스크립트 통신을 단순화합니다. 추적이 실행되도록 하기 위해 액션스크립트 3 호출과 애널리틱스 자바스크립트 간의 연결을 제공합니다.

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

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

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

브리지 모드가 올바르게 작동하려면 액션스크립트 3 코드에서 ExternalInterface.available를 true로 설정해야 합니다. 즉, 플래시 콘텐츠를 삽입하는 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로 설정하여 문제 해결 기능을 사용 설정할 수 있습니다.

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

플래시

유동적

버전 관리

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

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

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