Flutter web 에 카카오 애드핏 광고를 넣어보자!

* 안내말 입니다. 
* 개인적으로 남기는 글입니다. 아래의 경우를 미리 공지합니다. 
1. 높임말은 없는 경우가 있습니다. 
2. 영어, 일본어, 베트남어를 공부하고 있습니다. 경우에 따라서 사용됩니다.
3. 보기 거북하다면 뒤로가기 해주세요.

이야기 시작-

이왕에 앱을 개발하면서 웹에도 사용가능하게 할 수 있으니 이걸 이용해서 광고를 삽입하는 방법을 알아보려합니다. 

 

앱에서 광고라고 하면 "구글 admob" 이 있습니다. 

웹에서 광고라고 하면 "구글 애드센스" 가 있습니다. 

 

여기에 카카오 애드핏을 추가 생각할 수 있습니다. 

 

순서, 

1. 카카오애드핏에 광고 단위를 추가 해서 스크립트를 알아야합니다. 

2. flutter 프로젝트에서 web 폴더 아래에 adview.html 이라는 파일을 만듭니다.

adview.html 안에 위에 1번에서 알아낸 스크립트를 넣습니다. 

3. 아래의 코드를 넣습니다. 

import "dart:html";
import 'dart:ui' as ui;
~~~ <중략>
~~~ <중략>
~~~ <중략>

  Widget adsenseAdsView() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        'adViewType',
            (int viewID) => IFrameElement()
          ..width = '320'    // 애드핏에 만드는 사이즈를 넣습니다.
          ..height = '250'   // 애드핏에 만드는 사이즈를 넣습니다.
          ..src = 'adview.html'
          ..style.border = 'none');

    return SizedBox(
      height: 250.0,  // 애드핏에 만드는 사이즈를 넣습니다.
      width: 320.0,  // 애드핏에 만드는 사이즈를 넣습니다.
      child: HtmlElementView(
        viewType: 'adViewType',
      ),
    );
  }

 

4. 광고를 삽입할 부분에 adsenseAdsView() 을 넣어서 확인하시면됩니다. 

5. 이후 빌드 해서 호스팅에 업로드하고 애드핏에서 승인 되면 광고가 송출됩니다. 

 

 

작성글이 도움이 되셨다면 후원부탁드립니다. 
https://toss.me/kage2k