Popup 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にログインする
[管理]タブメニューのテンプレートから「テンプレートを追加」をクリックする
テンプレート名を任意に入力し、ユースケースを「ニュースレター」に設定し「ライブラリへ追加」をクリックする
作成したテンプレートを開き、「コンテンツフィールド」をクリックする
コンテンツフィールドの入力項目設定を以下のRender Template Settingsの通りに作成し、到達URLや画像URLなどの値はカスタマイズする
設問を複数用意する場合は、コンテンツフィールド編集の際に、設問用フィールドを設問数分増やす。
同様に「コードを編集」をクリックし、Render Template HTMLとRender Template CSSのコードをコピーしてペーストする(CSS/HTML上での位置調整用の修正等は適宜行ってください)
コードを編集する際に、複数設問がある場合は、HTMLコード中の"scope.questions"変数の要素を設問数分増やす。
「保存」をクリックする

Procedure - Experience

Piano Composerにログインする
新規サイトエクスペリエンス、もしくは既存のエクスペリエンスの編集画面に入る
任意の対象ページ、ターゲットオーディエンス、イベント／トリガーを定義する
アクションで「JSを実行」を選択し、以下のExperience Settings (RunJS)をコピーしてペーストする
同様にアクションで「JSを実行」を選択し、以下のCallback用JavaScriptExperience Settings (RunJS/Callback)をコピーしてペーストする
アクションの「テンプレートを表示」をドラッグし、上記で作成したRun JSの下にドロップする
表示設定を以下のように設定する。
タイプ：ページ上のインライン
コンテナのセレクター：#piano_inline
「保存」をクリックする

Render Template Settings (コンテンツフィールド)

コンテンツフィールド名	内容	設定例
header	アンケートタイトル	編集部からのアンケートに<br>ご協力お願いします
subheader	アンケートタイトル下	プライバシーポリシーを確認する
subheader-link	プライバシーポリシー等へのリンク	https://piano.io/
header-image	ウィジェット左上の画像/企業ロゴ等をURL指定	-
cta-text	送信ボタンのテキスト	回答を送信する
header-text-color	headerのテキスト配色	#323232
subheader-text-color	subheaderのテキスト配色	rgba(50, 50, 50, 0.7)
input-box-text-color	input
cta-text-color	送信ボタンのテキスト配色	#ffffff
background-color	ウィジェットの背景色	#ffffff
question_id1	設問のID。パフォーマンスパラメータのグループ名になります。(数字は複数設問の場合、適宜増やしてください)	householdincome
question_text1	設問の内容。パフォーマンスパラメータの値になります。(数字は複数設問の場合、適宜増やしてください)	Q1: 世帯年収
question_type1	設問の入力方法を指定してください。(数字は複数設問の場合、適宜増やしてください。またDMPイベント送信の仕様により複数選択には対応できませんのでご了承ください)	text/radio/select
answer_choices1	設問が選択式の場合の選択肢一覧です。カンマ区切りで指定してください。(数字は複数設問の場合、適宜増やしてください)	〜300万円未満,300万円〜500万円未満,500万円〜700万円未満,700万円以上
footer_note	設問下のテキスト。	回答結果は記事執筆の参考にさせて頂きます。

Render Template HTML

<config close-button-type="boilerplate"></config>

<div class="pn-boilerplate pn-boilerplate--newsletter">
    <div hide-if-blank class="pn-boilerplate__header">
        <button ng-if="isShowBoilerplateCloseButton()" class="pn-boilerplate__close unbutton" type="button" ng-click="close()" external-event="offer-close-modal">
            <span class="visually-hidden"><t>Close</t></span>
      <span class="up"></span>
      <span class="down"></span>
          <!--<svg class="pn-boilerplate__close-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.586 6L.293 1.707 1.707.293 6 4.586 10.293.293l1.414 1.414L7.414 6l4.293 4.293-1.414 1.414L6 7.414l-4.293 4.293-1.414-1.414L4.586 6z" fill="#0F0F15"/>
          </svg>-->
        </button>
    </div>

    <signup-screen class="pn-boilerplate__body pn-boilerplate__body--initial-screen">
      <img class="header-image" src="[%% header-image %%]"/>
      <b class="pn-boilerplate__accent"><t>[%% header %%]</t></b>
      <p class="pn-boilerplate__text pn-boilerplate__text--subheader"><a href="[%% subheader_link %%]" target="_blank"><t>[%% subheader %%]</t></a></p>
      <form class="pn-boilerplate__form" id="pn-survey" action="post">
        <div class="pn-boilerplate__input-group" newsletter-signup-invalid="pn-boilerplate__input-group--error">
          <ng-container ng-repeat="q in questions">
            <div class="pn-survey-group">
              <div class="pn-survey-question">
                <label>{{q.question}}</label>
              </div>
              <div class="pn-survey-answer" ng-switch="q.type">
                <ng-container ng-switch-when="text">
                  <input ng-model="result[q.id]" type="{{q.type}}" value="">
                </ng-container>
                <ng-container ng-switch-when="radio">
                  <label name="{{q.id}}" ng-repeat="answer in q.answers" class="pianoj-survey-radio">
                    <input ng-model="result[q.id]" type="{{q.type}}" value="{{answer}}">{{answer}}
                  </label>
                </ng-container>
                <ng-container ng-switch-when="select">
                  <select name="{{q.id}}" ng-model="result[q.id]" class="pianoj-survey-select">
                    <option ng-repeat="answer in q.answers" value="{{answer}}">{{answer}}</option>
                  </select>
                </ng-container>
              </div>
            </div>
          </ng-container>
        </div>
        <button class="pn-boilerplate__button unbutton"
                id="pn-submit"
                type="submit"
                external-event="survey"
                external-event-result="{{result}}"
                ng-click="close()"><t>[%% cta-text %%]</t></button>
      </form>
      <p class="pn-boilerplate__text pn-boilerplate__text--footer"><t>[%% footer_note %%]</t></p>
    </signup-screen>

  <div custom-script>
  (function() {
    var scope = angular.element("#pn-survey").scope();
    console.log(scope);
    scope.questions = [
      {id: "[%% question_id %%]", type: "[%% question_type %%]", question: "[%% question_text %%]", answers: "[%% answer_choices %%]".split(",")}
    ];
    scope.result = {};
  }());
  function log() {
    console.log(angular.element("#pn-survey").scope());
  }
  </div>

</div>

Render Template CSS

/* scaffolding */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.unbutton {
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    outline: 0;
    border: 0;
}

p {
    margin: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}
.header-image {
    width: 120px;
}

svg {
    margin: 0 auto;
}

b {
    display: block;
    font-weight: normal;
}

a,
button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* general style */

.pn-boilerplate {
    width: 100%;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: rgba(50, 50, 50, 0.8);
    -webkit-font-smoothing: antialiased;
    text-align: center;
    background-color: [%% background-color %%];
    border: 1px solid rgba(50, 50, 50, 0.08);
}

.pn-boilerplate__header {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 64px;
    border-bottom: 1px solid rgba(50, 50, 50, 0.08);
    z-index: 100;
}

.pn-boilerplate__close {
    width: 45px;
    height: 100%;
    margin-left: auto;
    border-left: 1px solid rgba(50, 50, 50, 0.08);
    cursor: pointer;
}

.pn-boilerplate__close-icon {
    display: inline-block;
    vertical-align: middle;
    fill-opacity: 0.3;
    -webkit-transition: fill-opacity 0.1s linear;
    transition: fill-opacity 0.1s linear;
}

.pn-boilerplate__close:hover .pn-boilerplate__close-icon,
.pn-boilerplate__close:focus .pn-boilerplate__close-icon {
    fill-opacity: 1;
}

.pn-boilerplate__body {
    display: block;
    padding: 62px 72px 56px;
}

.pn-boilerplate__body--initial-screen {
    padding: 47px 24px 24px;
}

.pn-boilerplate__body--success-screen {
    padding: 44px 24px 42px;
}

.pn-boilerplate__pic {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 36px;
}

.pn-boilerplate__accent {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: [%% header-text-color %%];
}

.pn-boilerplate--newsletter .pn-boilerplate__accent {
    margin-bottom: 6px;
}

.pn-boilerplate__text {
    font-size: 14px;
    line-height: 24px;
    color: [%% subheader-text-color %%];
}

.pn-boilerplate--newsletter .pn-boilerplate__text--subheader {
    #max-width: 300px;
    margin: auto;
    font-weight: 400;
}

.pn-boilerplate__form {
    #display: -webkit-box;
    #display: -ms-flexbox;
    #display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 516px;
    margin: 20px auto 20px;
}

.pn-boilerplate__input-group {
    position: relative;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    #flex-grow: 1;
    margin-right: 24px;
    text-align: left;
}

.pn-boilerplate__input-group::after {
    #content: "";
    #position: absolute;
    #top: 0;
    #left: 0;
    #display: block;
    #width: 48px;
    #height: 100%;
    #background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.099 1H1.9L7 4.4 12.099 1zM1 1.6V9h12V1.6L7.277 5.417 7 5.601l-.277-.185L1 1.601zM0 0h14v10H0V0z' fill='rgb(50,50,50)'/%3E%3C/svg%3E");
    #background-repeat: no-repeat;
    #background-position: 17px center;
    #background-size: 14px 10px;
    #pointer-events: none;
}

input.pn-boilerplate__input {
    width: 100%;
    height: 48px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: [%% input-box-text-color %%];
    border: 1px solid rgba(54, 54, 54, 0.1);
    border-radius: 0;
    text-overflow: ellipsis;
    -webkit-appearance: none;
}

.pn-boilerplate__input:hover,
.pn-boilerplate__input:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.pn-boilerplate__input-group--error .pn-boilerplate__input {
    padding-right: 48px;
    border-color: #f23d3d;
}

.pn-boilerplate__input::-webkit-input-placeholder {
    font-family: inherit;
    color: rgba(54, 54, 54, 0.4);
}

.pn-boilerplate__input::-moz-placeholder {
    font-family: inherit;
    color: rgba(54, 54, 54, 0.4);
}

.pn-boilerplate__input:-ms-input-placeholder {
    font-family: inherit;
    color: rgba(54, 54, 54, 0.4);
}

input.pn-boilerplate__input--email {
    padding-left: 48px;
    /*background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.099 1H1.9L7 4.4 12.099 1zM1 1.6V9h12V1.6L7.277 5.417 7 5.601l-.277-.185L1 1.601zM0 0h14v10H0V0z' fill='rgb(50,50,50)'/%3E%3C/svg%3E");*/
    /*background-repeat: no-repeat;*/
    /*background-position: 17px center;*/
    /*background-size: 14px 10px;*/
}

.pn-boilerplate__error-indicator {
    position: absolute;
    top: 0;
    right: 16px;
    display: none;
    bottom: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='rgb(242,61,61)'/%3E%3Cpath d='M8.5 5h-1v4h1V5zm0 5h-1v1h1v-1z' clip-rule='evenodd' fill='rgb(242,61,61)' fill-rule='evenodd'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.pn-boilerplate__input-group--error .pn-boilerplate__error-indicator {
    display: block;
}

.pn-boilerplate__error-message {
    position: absolute;
    bottom: calc(100% + 10px);
    right: -10px;
    display: none;
    min-width: 240px;
    padding: 12px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-align: center;
    background-color: #ed2939;
    -webkit-box-shadow: 0 15px 40px rgba(54, 54, 54, 0.2);
    box-shadow: 0 15px 40px rgba(54, 54, 54, 0.2);
}

.pn-boilerplate__error-message::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 14px;
    width: 8px;
    height: 8px;
    background-color: inherit;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pn-boilerplate__error-indicator:hover .pn-boilerplate__error-message {
    display: block;
}

.pn-boilerplate__button {
    min-width: 204px;
    padding: 13px 18px 11px;
    font-family: "Roboto", "Helvetica", sans-serif;
    font-size: 11px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: [%% cta-text-color %%];
    text-transform: uppercase;
    background-color: [%% button-color %%];
    cursor: pointer;
}

.pn-boilerplate--newsletter .pn-boilerplate__button {
    min-width: 144px;
}

.pn-boilerplate__button::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 9px;
    margin-left: 0;
    background-image: url('data:image/svg+xml,%3Csvg width=\'12\' height=\'9\' viewBox=\'0 0 12 9\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M7.5 0l-.7.7L10.1 4H0v1h10.1L6.8 8.3l.7.7 4.3-4.3.2-.2-.2-.2L7.5 0z\' fill=\'rgb(255, 255, 255)\'/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
}

.pn-boilerplate__button:hover::after,
.pn-boilerplate__button:focus::after {
    width: 12px;
    margin-left: 13px;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.pn-boilerplate--subscription .pn-boilerplate__button {
    margin: 45px 0 31px;
}

@media (max-width: 564px) {
    .pn-boilerplate {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pn-boilerplate__body,
    .pn-boilerplate--subscription .pn-boilerplate__body {
        padding-left: 24px;
        padding-right: 24px;
    }

    .pn-boilerplate__form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .pn-boilerplate__input-group {
        width: 100%;
        margin-right: 0;
        margin-bottom: 24px;
    }

    .pn-boilerplate__button {
        width: 100%;
    }
}

.pn-boilerplate__account {
    margin-left: auto;
}

.pn-survey-answer {
  margin-top: 10px;
}
.pn-survey-submit {
  margin-top: 10px;
  text-align: center;
}
.pn-description {
  font-size: smaller;
}

.pn-boilerplate__close{
  border-top:0;
    border-left: 0px;
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.4;
  height:100%;
}
.pn-boilerplate__close-icon path{
  fill:#333;
}
.pn-boilerplate__header{
  height:0px;
}
.pn-boilerplate__close-icon{
  opacity:1;
  fill-opacity:1;
}
.pn-boilerplate__body--initial-screen{
  padding:15px;
  box-shadow: 1px 4px 4px 5px rgb(0 0 0 / 15%);
}
.pn-survey-grou{
  color:#333;
}
.header-image{
  width: 55px;
    height: 28px;
    margin-bottom: 20px;
}
.pn-boilerplate__accent .ng-scope{
    font-size: 18px;
    font-weight: bold;
}
.pn-boilerplate--newsletter .pn-boilerplate__text--subheader .ng-scope{
    font-size: 14px;
}
.pn-survey-question .ng-binding{
    border-bottom: 1px solid #333;
    line-height: 1.4;
    padding-bottom: 5px;
}
label.pianoj-survey-radio{
    user-select: none;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
input.ng-valid{
    margin-right: 8px;
}
.pn-boilerplate__button{
    background-color: #035785;
    cursor: pointer;
    box-shadow: 0px 6px 0px 0 #033856;
    padding:11px
}
.pn-boilerplate__text .ng-scope{
    font-size: 12px;
}
.pn-boilerplate__input-group{
  margin-bottom:10px;
  margin-top:0px;
}
.pn-boilerplate__form form{
  margin-bottom:15px;
}
.pn-boilerplate__close{
  right:0
}
.pn-boilerplate__button{
  font-size:14px
}
.no-js body{
  background: rgba(0, 0, 255, 0);
}
  .pn-boilerplate__body--initial-screen{
  background: #ffffff;
  }
  .pn-boilerplate{
    width: 90%;
    margin: auto;
  }
.pn-boilerplate{
    border: 2px solid #e6e6e6;
}
.pn-survey-answer{
      margin-top: 3px;
}
.tp-iframe-wrapper{
  margin-top:20px;
  margin-bottom:-50px;
}
button.pn-boilerplate__close span{
  position: absolute;
  left: 5px;
  width: 36px;
  height: 2px;
  border-radius: 3px;
}
.up{
transform: rotate(45deg);
    top: 13px;
    background-color: #676767;
    z-index: 1000;
}
.down{
  transform: rotate(-45deg);
    top: 13px;
    background-color: #676767;
    z-index: 1000;
}

Experience Settings

このサンプルでは、クッキーで1日に1回の表示制御を行っています。

Experience Settings (RunJS) -ウィジェット差し込み用要素の追加とテンプレートの表示-

(function(){
  var elid = "piano_survey";
  var el = document.getElementById(elid) || document.createElement('div');
  el.id = elid;
  el.style.position = "fixed";
  el.style.bottom = "20px"; //下から20px
  el.style.right = "5px"; //右から20px
  el.style.transform = "translateY(100%)"; //初期位置
  el.style.opacity = "0"; //初期透過
  el.style.transition = "all 1.5s";
  el.style["z-index"] = "9999";
  el.style.width = "385px";
  if(!document.getElementById(elid)) {
    document.body.insertAdjacentElement("beforeend", el);
  }
  var piano_inline = document.createElement('div');
  piano_inline.id = "piano_inline";
  el.appendChild(piano_inline);
  tp = window.tp || [];
  tp.push(["addHandler", "showTemplate", function(template) {
    if(template.containerSelector = "#" + elid) {
      setTimeout(function() {
        el.style.transform = "translate3d(0,0,0)";
        el.style.opacity = "1";
      }, 1500);
    }
  }]);
  tp.template.show({templateId:'/*テンプレートIDは作成したものをセットしてください*/', displayMode:'inline', containerSelector:'#piano_inline', trackingId: context.trackingId});
})();

Experience Settings (RunJS/Callback)

function sendSurveyEvent(event) {
  try {
    if(typeof event.params.result != 'undefined') {
      var result = JSON.parse(event.params.result);
      var customerPrefix = '/* お客様ごとに用意されているプレフィックスを指定してください */';
      var persistedQueryId = '/* /dmp/push API用のpersistedQueryIdをご用意ください */';
      if(result) {
        cX.setEventAttributes({origin: customerPrefix + "-web", persistedQueryId: persistedQueryId});
        cX.sendEvent("survey", result);
      }
    }
  }
  catch (e) { console.log(e); }
}
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function onCheckoutExternalEvent(event) {
  console.log(event.eventName);
  switch (event.eventName) {
    case 'survey':
      sendSurveyEvent(event);
      // don't break here
    case 'offer-close-modal':
      setCookie("_pc_survey_closed", "true", 14);
      break;
  }
  var elid = "piano_survey";
  var el = document.getElementById(elid) || document.createElement('div');
  el.style.display = "none";
}
tp.push(["addHandler", "checkoutCustomEvent", onCheckoutExternalEvent]);

Experience Settings(Cookie)