Popup&Carousel 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を「広告ブロッカー」に設定し「追加」をクリックする
作成したテンプレートを開き、「Edit code」をクリックする
以下のRender Template HTMLとRender Template CSSのコードをコピーしてペーストする
同様にコンテンツフィールドの入力項目設定を以下のRender Template Settingsの通りに作成し、到達URLや画像URLなどの値はカスタマイズする
「保存」をクリックする

Procedure - Experience

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

Render Template Settings (AdBlocker template)

Render Template HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<div id="pianoj-close" ng-click="close()">
  <svg viewbox="0 0 24 24">
    <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path>
    <path d="M0 0h24v24h-24z" fill="none"></path>
  </svg>
</div>
<div class="slider_container">
  <div class="slider">
    <div><a href="[%% link_url_1 %%]" target="_parent"><img src="[%% img_url_1 %%]"></a></div>
    <div><a href="[%% link_url_1 %%]" target="_parent"><img src="[%% img_url_2 %%]"></a></div>
    <div><a href="[%% link_url_1 %%]" target="_parent"><img src="[%% img_url_3 %%]"></a></div>
  </div>
</div>
<custom-script>
  (function(src, callback) {
    var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src=src;s.onload=function(){callback()};var o=document.querySelector("body").insertAdjacentElement("beforeend", s);
  })("//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js", function() {
    $(".slider").slick({
      infinite: false,
      dots: true
    });
    window.parent.postMessage({eventName:"rendering_finish"}, '*');
  });
</custom-script>

Render Template CSS

.slider{
  width: 100%;
  margin: 0 auto;
}
.slider img{
  width: 100%;
  height: 100%;
}
.slick-slide{
  height: auto !important;
}
.slick-next{
  width: 30px !important;
  height: 30px !important;
  right: 0 !important;
}
.slick-next:before{
  font-size: 30px !important;
  color: #666666 !important;
}
.slick-prev{
  width: 30px !important;
  height: 30px !important;
  left: 0 !important;
}
.slick-prev:before{
  font-size: 30px !important;
  color: #666666 !important;
}

.slick-arrow{
  z-index: 2 !important;
}
.slick-dots{
  bottom: 0 !important;
}

#pianoj-close {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 0.2rem;
  cursor: pointer;
  z-index: 999999;
}
#pianoj-close svg{
  width: 20px;
  fill: #000000;
  pointer-events: none;
  vertical-align: top;
}

Experience Settings

Experience Settings (RunJS)

(function(){
  var elid = "pianoj_slidein";
  var el = document.getElementById(elid) || document.createElement('div');
  el.id = elid;
  el.style.position = "fixed";
  el.style.bottom = "10px"; //下から10px
  el.style.right = "10px"; //右から10px
  el.style.transform = "translateY(100%)"; //初期位置
  el.style.opacity = "0"; //初期透過
  el.style.transition = "transform 1.5s, opacity 1.5s";
  el.style["box-shadow"] = "4px 4px 20px 5px rgba(0,0,0,0.4)";
  el.style["z-index"] = "9999";
  if(!document.getElementById(elid)) {
    document.body.insertAdjacentElement("beforeend", el);
  }

  // for responsive (breakpoint, {mobile: width, desktop: width}, element)
  (function(breakpoint, widthSet, el) {
    function resposiveWidget(mm) {el.style.width = mm.matches ? widthSet.mobile : widthSet.desktop;}
    var mm = window.matchMedia("screen and (min-width: " + breakpoint + ")");
    mm.addListener(resposiveWidget);
    resposiveWidget(mm);
  })("769px", {mobile: "300px", desktop: "200px"}, el);

  // To synchronize the end of widget drawing
  window.addEventListener("message", function(event) {
    if (event.data.eventName == "rendering_finish") {
      el.style.transform = "translate3d(0,0,0)";
      el.style.opacity = "1";
    }
  });
  // for closing
  tp.push(["addHandler", "checkoutClose", function(event){
    el.style.visibility = "hidden";
  }]);
})();