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)
  })
});