애드핏 반응형 광고로 만들어 보기

애드핏은 애드센스와 달리 광고가 고정 이잖아요. 그래서 반응형 스킨을 사용하는 경우 pc에 등록시켜 놓은 광고가 모바일에도 동일하게 나타나거나 모바일쪽에 있던 광고가 pc에 동일하게 나타나는 경우를 없애려는 소스가 있어서 공유하려고 합니다. 

 

즉, pc에 있던 광고의 크기가 728X90 사이즈인데 모바일로 볼 경우에도 728X90으로 보이면 짤리는 현상이 있기 때문에 이 현상을 없애기 위해 검색하다 찾아낸 소스입니다. 

 

pc를 제외한 태블릿이나 스마트폰의 해상도는 320X480, 640X960, 480X800, 1024X600 사이즈로 여러가지가 있습니다. 이중에서 pc만큼 해상도가 높은 것은 없고, 가장 큰 사이즈인 1024에 맞추어서 자동으로 사이즈가 작아지는 소스거든요.

 

원래 출처는 https://www.jbfactory.net/12210 여기입니다. 여백 주는 방법과 해상도에 따라 다른 광고가 나오게끔 스크립트 소스를 공개 했는데요. 

 

이걸 조금 변형해 봤습니다. 변형이라고 해봤자 숫자 한곳 바꾼거라서 원본과 동일하다고 생각해도 될겁니다. 위 출처의 원본을 보면 1024px이상의 가로폭일 경우에는 728x90을 나타내고, 768px 이하의 가로폭에서는 300x250으로 나타나게 한다고 써있더라고요. 

 

그런데 이렇게 할 경우 1023-729까지의 가로폭에서는 광고가 나오지 않는 단점이 있더군요. 그래서 이렇게 소스를 고쳤습니다. 

 

1024이상은 728x90 사이즈로 출력하도록 하고 1023이하는 300x250으로 나오게 하면 되지 않을까 싶어서 스크립트 짠 소스에서 숫자만 바꾸었습니다. 여기에 가로폭이 1023인 경우 300x250사이즈는 조금 작을 수 있고, 애드핏 특성상 한쪽에 덩그라니 출력되어서 가운데로 맞추는 center태그를 넣었고요. 

 

왜그런지는 모르겠지만, 위쪽글자와 애드핏 광고 간격이 없어서 br 태그를 넣어 위아래 여백을 만들었습니다. div태그 넣었으니 padding속성을 주던, margin태그를 넣던 상관은 없지만, br을 오랫동안 많이 써먹어왔던 탓에 br로 여백을 만들었습니다. 

 

결론적으로 소스는 아래와 같이 됩니다. 이미지를 보면, 위쪽에 br 태그로 위아래 공백을 만들고 가운데 정렬을 시켜 놓으려고 div 태그로 지정해 놓은게 보일겁니다.

 

여기서 바꿀 점은 애드핏 광고의 소스를 document.write(' 여기서부터~ 여기까지 ') 넣으면 되는데요. 헷갈릴 겁니다. 잘 보면. ins로 빨간 밑줄이 시작되는 부분 부터이며, script로 끝나는 빨간 밑줄 끝부분까지 동일하게 넣으면 된답니다.

 

첫번째 document.write의 경우에는 728x90해상도 소스를 넣으면 되고, 두번째 document.write에는 그 이하의 해상도에 맞는 것을 넣으면 됩니다. 250x250, 300x250, 320x100, 320x50중 어느것을 넣든 취향대로 해도 되지만, 개인적으로는 300x250과 250x250이 가장 잘 어울리더라고요. 

 

그리고, html에 직접 넣는 유저분들이든, 에드핏pc 플러그인 사용하는 유저분들이든, 위 소스 그대로 본문 맨 위 혹은 맨 아래 어느곳이든, 등록이 되니 처음 애드핏을 등록하려는 유저들도 편하게 사용하길 바랍니다. 하면서 에드핏 모바일도 등록해 놓는 것을 추천하고 싶네요. 반응형이 제대로 동작하지 않거나, 직접 소유자가 모바일로 볼 경우에는 모바일 소스로 등록해 놓은 광고가 보이거든요. 

 

그러니 한번이라도 광고 노출이 안되는 현상을 없애려면, 모바일쪽도 등록해 놓는 것 추천하고 싶어요. 시간 되는 분들은 위 링크로 남겨 놓은 원본 소스 제작자 사이트에 들려 보는것도 좋을 것 같고요. 여러가지 스킨과 관련해 티스토리 강좌 설명을 해놓았으며 멋진 스킨도 팔고 있거든요. 많은 도움이 될거란 생각이 듭니다. 

 

html부터 css,자바스크립트, php등 여러가지 소스 강좌를 진행하고 있으며, 도움 될만한 소스도 많이 있으니 살펴보고 가면 이득되거나 뭔가 하나라도 더 배웠다는 생각을 가지게 될겁니다.

 

참, 위 이미지 보고 그대로 적긴 힘들겠죠. 그래서 메모장으로 적어 올려놓을께요. 주의점을 이야기 안했네요. 빨간 밑줄 끝 \/스크립트 모양 그대로 유지한채 소스가 끝나야 합니다. 이미지로 보면 Vscript로 보이는데, 메모장으로 보면 \/으로 표현됩니다. 애드핏 광고 소스 복사할 때 마지막 부분은 async까지 복사한 후 넣어주는게 편할지도 모르겠네요.

 

이해가 잘 안되면, 원래 출처 링크로 가서 다시 한번 설명을 잘 보세요. 스크립트에 대한 설명도 있으니 읽어 보고 그대로 해보길 바랍니다. 

다음애드핏자동조절광고.txt

0.00MB