팝콘텐츠 광고(For GS)

팝콘텐츠(룰렛, 출석체크, 날씨 등) 형태의 페이지와 광고를 하나의 화면에서 제공 합니다.

팝콘텐츠 광고는 Flutter plugin v1.0.9(Android v3.7.4, iOS v2.9.4 이상)부터 지원합니다.

팝콘텐츠 광고를 노출 시키고자 할 경우, 반드시 유저 식별값 설정을 진행해 주어야 합니다.

1. 유저 식별값 입력

유저 식별값은 콘텐츠 광고 페이지내 광고 완료 시 유저에게 정확한 리워드를 지급하기 위해 사용되는 값입니다.

주의 사항

1명의 유저는 1개의 고유한 유저 식별값을 가져야 하며, 가변적인 값을 사용해서는 안됩니다.
개인정보(이메일, 이름, 전화번호, 식별 가능한 유저 아이디 등)이 포함되어서는 안됩니다.
한글, 특수 문자, 공백 등이 포함된 경우에는 반드시 URL 인코딩 처리를 하여 사용하여야 합니다.
openPopContents API를 호출하기 전에 설정되어야 합니다.

위 주의사항에 유의하여 유저 식별값을 입력합니다.

AdPopcornSSP.setUserId('TEST_USN');

2. 팝콘텐츠 페이지 오픈

openPopContents() API를 호출하여 콘텐츠 페이지를 오픈합니다.

Dart

AdPopcornSSP.openPopContents('your_app_key', 'your_placement_id');

3. 이벤트 연동

팝콘텐츠 페이지 이벤트를 받는 설정을 진행할 수 있습니다. 원하는 이벤트만 연동하여 사용하면 됩니다.

Dart

AdPopcornSSP.popContentsAdOpenSuccessListener = () {
};
AdPopcornSSP.popContentsAdOpenFailListener = () {
};
AdPopcornSSP.popContentsAdClosedListener = () {
};

이벤트

설명

AdPopcornSSP.popContentsAdOpenSuccessListener

팝콘텐츠 페이지 오픈 성공

AdPopcornSSP.popContentsAdOpenFailListener

팝콘텐츠 페이지 오픈 실패

AdPopcornSSP.popContentsAdClosedListener

팝콘텐츠 페이지 닫기

4. 샘플 코드

Dart

AdPopcornSSP.openPopContents('your_app_key', 'your_placement_id');
AdPopcornSSP.popContentsAdOpenSuccessListener  = () {
};

AdPopcornSSP.popContentsAdOpenFailListener = () {
};

AdPopcornSSP.popContentsAdClosedListener = () {
};

5. Flutter WebView 활용한 연동.

Flutter webview에서 Javascript 호출을 통해 위에 popContents api를 호출하는 예시입니다.

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io' show Platform;

import 'package:flutter/services.dart';
import 'package:adpopcornssp_flutter/adpopcornssp_flutter.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final WebViewController _webViewController;

  @override
  void initState() {
    super.initState();

    _initializeAdPopcorn();
    _setupWebViewController();
  }

  void _initializeAdPopcorn() {
    if (Platform.isAndroid) {
      AdPopcornSSP.init('436579265');
    } else if (Platform.isIOS) {
      AdPopcornSSP.init('537048423');
    }
    AdPopcornSSP.setUserId('TEST_USN');
  }

  void _setupWebViewController() {
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'AdPopcornSSPBridge',
        onMessageReceived: (JavaScriptMessage message) {
          _handleJsMessage(message.message);
        },
      )
      ..loadHtmlString('''
        <!DOCTYPE html>
        <html>
        <head>
          <title>Ad Trigger</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
          <h3>WebView에서 팝콘텐츠 호출</h3>
          <button onclick="AdPopcornSSPBridge.postMessage('openPopContents')">팝콘텐츠 광고 보기</button>
        </body>
        </html>
      ''');
  }

  void _handleJsMessage(String message) {
    print('WebView JS message: $message');
    if (message == 'openPopContents') {
        if (Platform.isAndroid) {
            AdPopcornSSP.openPopContents('436579265', 'ZlOXGQbuuX');
        }
        else if (Platform.isIOS) {
            AdPopcornSSP.openPopContents('537048423', 'bjJoq2QZcQ');
        }
    }
  }

  Widget _webViewWithBridge() {
    return WebViewWidget(controller: _webViewController);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AdPopcornSSP flutter WebView Demo'),
        ),
        body: ListView(
          children: [
            SizedBox(height: 500, child: _webViewWithBridge()),
            const Divider(),
          ],
        ),
      ),
    );
  }
}

광고 SDK 종속성 코드 생성기s3.ap-northeast-1.amazonaws.com

Last updated 1 month ago

hashtag1. 유저 식별값 입력

hashtag2. 팝콘텐츠 페이지 오픈

hashtag3. 이벤트 연동

hashtag4. 샘플 코드

hashtag5. Flutter WebView 활용한 연동.

1. 유저 식별값 입력

2. 팝콘텐츠 페이지 오픈

3. 이벤트 연동

4. 샘플 코드

5. Flutter WebView 활용한 연동.