Google Offerwall Template (Composer)

Cxense is proud to welcome publishers and media companies in Japan, to a seminar at the Royal Norwegian Embassy in Tokyo on May 28th.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

The seminar will feature two Cxense case studies with esteemed guest speakers from DMM.com Lab and MediaGene, as well as an industry update from Cxense's founder Dr. John M. Lervik, and an update and demo of the newly launched Cxense DMP solution by its Product Manager, Mr. Jan Helge Sageflaat coming in from Oslo, Norway, for the event.

As the first Cxense Japan event in 2013 was a great success and attended by over 80 publishers and media contacts, we have decided to host another event this year.

The seminar will provide Cxense customers and contacts in the Japanese publishing world with valuable industry updates, and serve as a networking forum for media companies.

Procedure - Template

Piano Composerにログインする
[テンプレート]タブから「テンプレートを追加」をクリックする
テンプレート名を任意に入力し、USE CASEを「広告ブロッカー」に設定し「追加」をクリックする
作成したテンプレートを開き、「コードを編集」をクリックする
以下の広告ありTemplate HTML と広告ありTemplate CSS のテキストをコピーしてペーストする
続けてコンテンツフィールドの入力項目設定を以下の広告ありTemplate Settings の通りに作成し、画像URLなどの値はカスタマイズする
「保存」をクリックする
同様に広告なしTemplate HTML、広告なしTemplate CSS、広告なしTemplate Settings の設定を行い「保存」をクリックして保存する。
作成したテンプレート2つのIDをRunJSのコードの該当箇所に記載する。

Procedure - Experience

Piano Composerにログインする
新規サイトエクスペリエンスを作成する
任意の対象ページを定義する
ターゲットオーディエンスに広告を表示「しない」条件（ログイン済み等）を定義し、アクション実行なしカードを定義する。
さらに、ターゲットオーディエンスに「カスタムクッキー」で、_pc_reward_granted(名称は変更可能だが、RunJSカード内も併せて変更する必要あり）クッキーがtrueの条件を追加し、アクション実行なしカードを定義する。
ターゲットオーディエンス条件の最後に「他の全ユーザー」条件を追加し「JSを実行」カードを追加する。
「JSを実行」カードに、以下の Experience Settings (RunJS) をコピーしてペーストする
「保存」をクリックする

広告ありTemplate HTML

<div class="flex-wrapper">
  <div>
    <img class="logo-image" ng-if="app.image1" ng-src="{{app.image1}}" width="72" height="72" alt="">
  </div>
  <div class="button-wrapper">
    <p class="text">[%% header1 %%]</p>
    <button class="btn" type="button" ng-click="close()" external-event="watch-ad">
      [%% btnText1 %%]
    </button>
  </div>
  <div class="button-wrapper">
    <p class="text">[%% header2 %%]</p>
    <button class="btn" type="button" ng-click="login()" external-event="offer-login">
      [%% btnText2 %%]
    </button>
  </div>
  <div>
    <a href="[%% siteUrl %%]" target="_parent">サイトトップに戻る</a>
  </div>
</div>

広告ありTemplate CSS

* {
  font-size: 16px;
  text-decoration: none;
}

body {
  background-color: #FFFFFF;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.flex-wrapper>div {
  width: 90%;
  text-align: center;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo-image {
  margin-top: 20px;
}

.button-wrapper>.btn {
  min-width: 60%;
  margin: auto;
}

.btn {
  height:  3rem;
  line-height: 3rem;
  padding: 0;
  border: 1px solid #CCCCCC;
  border-radius: 1.5rem;
  font-weight: bold;
  text-align: center;
  display: block;
  text-decoration: none;
  font-size: 100%;
  background-color: #666666;
  color: #FFFFFF;
}

広告ありTemplate Settings

| コンテンツフィールド | 値（サンプル） | | --- | --- | | header1 | 下記のボタンで広告を見ていただくことにより、会員限定記事を読むことができます | | btnText1 | 広告を見る | | header2 | 会員登録済みの方は以下のボタンからログインしてください | | btnText2 | ログインする | | siteUrl | 貴社サイトのURL |

広告なしTemplate HTML

<div class="flex-wrapper">
  <div>
    <img class="logo-image" ng-if="app.image1" ng-src="{{app.image1}}" width="72" height="72" alt="">
  </div>
  <div class="button-wrapper">
    <p class="text">[%% header1 %%]</p>
    <button class="btn" type="button" ng-click="login()" external-event="offer-login">
      [%% btnText1 %%]
    </button>
  </div>
  <div class="button-wrapper">
    <p class="text">[%% header2 %%]</p>
    <button class="btn" type="button" ng-click="register()" external-event="offer-register">
      [%% btnText2 %%]
    </button>
  </div>
  <div>
    <a href="[%% siteUrl %%]" target="_parent">サイトトップに戻る</a>
  </div>
</div>

広告なしTemplate CSS

* {
  font-size: 16px;
  text-decoration: none;
}

body {
  background-color: #FFFFFF;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.flex-wrapper>div {
  width: 90%;
  text-align: center;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo-image {
  margin-top: 20px;
}

.button-wrapper>.btn {
  min-width: 60%;
  margin: auto;
}

.btn {
  height:  3rem;
  line-height: 3rem;
  padding: 0;
  border: 1px solid #CCCCCC;
  border-radius: 1.5rem;
  font-weight: bold;
  text-align: center;
  display: block;
  text-decoration: none;
  font-size: 100%;
  background-color: #666666;
  color: #FFFFFF;
}

広告なしTemplate Settings

| コンテンツフィールド | 値（サンプル） | | --- | --- | | header1 | 会員限定記事です。会員登録済みの方はログインしてください | | btnText1 | ログインする | | header2 | 会員登録がお済みでない方は下のボタンから登録してください | | btnText2 | 会員登録する | | siteUrl | 貴社サイトのURL |

Experience Settings (RunJS)

コメントに(*)がついている部分は貴社環境に合わせて変更する必要があります。

// Reference: https://developers.google.com/publisher-tag/samples/display-rewarded-ad?hl=ja
window.googletag = window.googletag || { cmd: [] };
const rewardDebug = false; // (*) デバッグ中はtrueにするとコンソールにログが出ます
const rewardLog = logText => rewardDebug && (console.log(logText));
rewardLog('Initialize reward ads');
googletag.cmd.push(() => {
  let rewardTimeoutId = false;
  const rewardPromise = new Promise((resolve, reject) => {
    // リワード広告閲覧済みクッキーの名称
    const grClosedCookieName = "_pc_reward_granted";
    // リワード広告閲覧済みクッキーの生存時間 (*)
    let grCookieExpireSec = "180"; // 180 = 3分
    // リワード広告スロットの定義 (*)
    let rewardedSlot = googletag.defineOutOfPageSlot(
      "/22639388115/rewarded_web_example", // 貴社環境で作成したリワード広告スロットIDを指定します
      googletag.enums.OutOfPageFormat.REWARDED,
    );
    // リワード広告閲覧済みチェック
    let rewardPayload = null;
    if (rewardedSlot) {
      rewardedSlot.addService(googletag.pubads());
      // リワード広告の表示準備完了
      googletag.pubads().addEventListener("rewardedSlotReady", (gpt_event) => {
        rewardLog("Reward Ready")
        // timerを解除
        rewardTimeoutId && (clearTimeout(rewardTimeoutId));
        // 広告を見るボタンのコールバック設定
        window.tp && tp.addHandler("customEvent", (tp_event) => {
          if(tp_event.eventName == "watch-ad") {
            rewardLog("Watch Ad is clicked.")
            // 広告の表示
            gpt_event.makeRewardedVisible();
          }
        });
        // rewardedSlotReadyをセットしてresolve
        resolve("rewardedSlotReady");
      });
      // リワード広告がクローズされた
      googletag.pubads().addEventListener("rewardedSlotClosed", (gpt_event) => {
        if (rewardPayload) {
          // リワード広告を見終わってからクローズした
          const slot = gpt_event.slot;
          if(slot) {
            // slotを廃棄
            rewardLog(`Rewarded slot ${slot.getSlotElementId()} is destroyed`);
            googletag.destroySlots([slot]);
          }
          rewardPayload = null;
        }
        else {
          // リワードを見終わっていないのでページをリロード
          location.reload();
        }
      });
      // リワード広告を見終わった
      googletag.pubads().addEventListener("rewardedSlotGranted", (gpt_event) => {
        rewardPayload = gpt_event.payload;
        // クッキーをセット
        rewardLog(`Rewarded cookie is set to ${grCookieExpireSec} sec.`)
        document.cookie = `${grClosedCookieName}=true; max-age=${grCookieExpireSec}; path=/`;
      });
      // リワード広告在庫チェック
      googletag.pubads().addEventListener("slotRenderEnded", (gpt_event) => {
        const slot = gpt_event.slot;
        rewardLog(`slot ${slot.getSlotElementId()} has been rendered`);
        // リワード広告のslotのイベントである
        if(slot == rewardedSlot) {
          // リワード広告在庫なし
          if(gpt_event.isEmpty) {
            // timerを解除
            rewardTimeoutId && (clearTimeout(rewardTimeoutId));
            rewardLog("slot is empty");
            // rewardedSlotEmptyをセットしてresolve
            resolve("rewardedSlotEmpty");
          }
          else {
            rewardLog("slot is not empty")
          }
        }
      });
      // 広告タグの実行
      googletag.enableServices();
      googletag.display(rewardedSlot);
    }
    else {
      rewardLog("Rewarded ads are not supported on this page.");
    }
    // タイムアウトのハンドリング (*)
    rewardTimeoutId = setTimeout(() => {
      rewardLog(`Setup reward timeouted`);
      resolve("rewardedSlotEmpty");
    }, 1000); // 1000 = 1秒 リワード広告が埋まらず広告なしテンプレートが表示されることが多い場合はタイムアウトを伸ばすことをご検討ください
  })
  rewardPromise.then((key)=>{
    if(key == "rewardedSlotReady") {
      // 広告見るボタンありテンプレート表示 (*)
      window.tp && tp.template.show({
      templateId: "<templateId with Ad>", // 作成した広告ありテンプレートのIDに書き換えます
        displayMode: "modal",
        trackingId: context.trackingId,
        showCloseButton: false
      });
    }
    else if (key == "rewardedSlotEmpty"){
      // 広告見るボタンなしテンプレート表示 (*)
      window.tp && tp.template.show({
      templateId: "<templateId without Ad>", // 作成した広告なしテンプレートのIDに書き換えます
        displayMode: "modal",
        trackingId: context.trackingId,
        showCloseButton: false
      });
    }
    rewardLog("Setup reward completed.")
  }).catch((msg) => {
    rewardLog(msg)
  })
});