OpenX(OpenAds) 광고서버에 플래시 광고 게재하기

OpenX는 GNU 라이선스를 기반으로 한 오픈 소스 광고 서버 프로젝트의 이름입니다. 본디 웹사이트에 들어가는 광고 배너를 관리하고 추적하는 서버용 프로그램으로 출발했으나, 지금은 구글 애드센스와 같은 광고 프로그램까지 운영하고 있습니다. 처음 phpAds라는 프로젝트로 시작했다 중단된 것을 phpAdsNew로 다시 시작, 나중에 OpenAds로 이름을 바꾸었고 오늘날 다시 이름을 바꾸어 OpenX가 되었습니다(자세한 내용).

 

광고서버의 역할

광고서버는 웹사이트 운영에서 아주 중요한 역할을 합니다. 특히 배너광고가 주 수입원인 사이트라면 더더욱 중요하죠. 광고서버는 배너를 등록하고, 관리하며, 웹사이트에 게재하고, 추적하는 기능을 갖고 있습니다. 웹사이트에 게재되는 배너를 종합적으로 다루는 것이죠.

예를 들어 보겠습니다. 웹 페이지에 두 개의 광고 이미지가 걸려있습니다. 하나는 일반적인 img 태그와 a 태그로 삽입된 것이고, 또 하나는 광고서버의 스크립트를 통해 삽입된 것입니다. 웹사이트 사용자가 첫 번째 이미지를 클릭하면, a 태그에 입력된 사이트로 이동될 것입니다. 단순한 링크 방식에 지나지 않죠. 그러나 사용자가 두 번째 이미지를 클릭하는 순간, 사용자의 기본적인 데이터(시간, IP, 브라우저 속성 등)가 광고서버로 전해짐과 동시에 클릭 1번이 카운트 됩니다. 그리고 광고서버에 설정된 URL로 이동됩니다. 워낙 순식간에 일어나는 일이라 사용자는 그 차이를 느끼기 쉽지 않지만, 화면 뒤에선 그 짧은 순간에 꽤 많은 일들이 일어나고 있는 것이죠.

이를 통해 광고서버는 광고 노출수나 클릭율을 집계할 수 있고, 이는 다음에 좀더 효과적인 광고 집행을 위한 기초 데이터로 활용됩니다.

 

OpenX에서의 텍스트, 이미지 광고

OpenX에서는 다양한 광고 배너 형식을 지원합니다. 전통적인 텍스트 광고나 이미지 광고도 그 중 하나죠. 이들은 텍스트나 이미지에 링크를 거는 방식으로 광고가 게재됩니다. OpenX에서는 기본적으로 자바스크립트를 이용해 구현하고 있습니다. 웹 페이지의 광고 영역에 스크립트 코드를 넣어두면, OpenX에서 자동으로 미리 설정된 광고를 보여주는 식이지요. 광고에 쓰일 텍스트의 길이를 적절히 조절한다거나, 광고에 쓰일 이미지의 크기를 광고 영역에 맞추는 일 외에 따로 신경 써 줄 부분은 없습니다.

 

OpenX에서의 플래시 광고와 클릭태그

특별히 신경 써야 할 부분은 OpenX에서 지원하는 또 하나의 광고 형식인 플래시 광고입니다. 텍스트나 이미지 광고와는 달리, OpenX에 플래시 광고를 넣을 땐 특정한 코드를 플래시 내에 삽입해야 합니다. 바로 클릭태그죠.

텍스트나 이미지 광고에서는 광고에 필요한 링크를 HTML에서 걸어줄 수 있습니다. 하지만 플래시는 그럴 수 없죠. 플래시 오브젝트 내에 링크를 삽입해야 합니다. 간단하게 getURL 같은 액션스크립트를 이용할 수도 있겠지만, 문제는 이렇게 할 경우 광고서버와 연동이 안됩니다. 노출수도, 클릭수도 집계할 수 없게 되는 것이죠. 때문에 별도의 액션스크립트를 플래시 내에 삽입해야 합니다.

 

클릭태그

on (release) {
  if (clickTAG.substr(0,5) == "http:") {
    getURL(clickTAG,clickTARGET);
  }
}

http://www.openx.org/en/docs/tutorials/Using+Flash+with+OpenX

에서 클릭태그로 쓸 액션스크립트를 찾아볼 수 있습니다. 꽤 간단하죠? 광고로 쓸 플래시 파일에 이 스크립트를 삽입해야 합니다. 그래야 OpenX 광고서버와 연동이 되어 노출수도 집계하고, 클릭수도 집계하고 그러죠.

 

플래시에 클릭태그 삽입하기

플래시에는 원본파일과 퍼블리싱 파일이 따로 있습니다. .fla 파일과 .swf 파일이 그것이죠. fla에서 swf를 생성할 순 있지만, 그 반대로는 어렵습니다. 때문에 클릭태그를 넣어주기 위해서는 fla 파일이 꼭 필요합니다. 그럼 이제, 클릭태그를 어떻게 넣는지 그림으로 설명해 드리겠습니다.

 

▲ 이미 완성된 플래시 광고 파일이 있다고 가정합시다. 모든 레이어의 맨 위에, 빈 레이어를 하나 만듭니다. 여기선 버튼이란 뜻의 btn을 레이어 이름으로 썼습니다.

 

▲ Ctrl + F8 단축키를 눌러, 새 심볼을 추가합니다. 이름을 넣어주고, 타입을 Button으로 설정해 줍니다.

 

▲ 새로 만든 심볼의 편집화면에서 'Hit' 프레임을 클릭한 뒤 네모를 하나 그려줍니다. Hit 프레임이기 때문에 사이즈나 색은 상관 없습니다.

 

▲ 다시 첫 화면으로 돌아와서, btn 레이어에 아까 만든 심볼을 추가합니다.

 

▲ 화면 하단의 Properties 패널을 이용해 심볼의 크기와 위치를 지정할 수 있습니다. 여기서는 사각형 300x250px 광고에 맞춰 크기를 지정했습니다.

 

▲ F9 단축키를 눌러, 액션 스크립트 편집창을 엽니다. 심볼이 선택된 상태에서 위 스크립트를 넣어줍니다.

 

마무리&요약

간략히 하면,

• 플래시 무비 위에 새 레이어 추가하기
• 새 레이어에 버튼 타입으로 네모난 심볼 추가하기
• 네모난 심볼에 액션 스크립트 넣기

로 요약해 볼 수 있겠습니다. 생각보다 간단한 작업입니다. 이제 swf 파일을 생성하고, 광고서버에 올리면 됩니다. 광고 페이지의 URL은 광고서버에서 넣어주면 됩니다.