カスタマイズサンプル集

ダイナミックブロックを利用する上でのカスタマイズ例を集めました。
※　以下はサンプルコードです。 このままコピー＆ペーストしても動作しませんのでご注意ください。

ユーザー情報変数をイベント以外からセットする

krtBlock.setVal(’変数名','値（処理内容）'); 

1：URLから指定したパラメータの値を取得する

// 1:検索したいクエリパラメータのkeyを指定する
const key = "rank";

function getQueryParameterValue(key) {
    const params = new URLSearchParams(window.location.search);
    return params.get(key);
}

// 1の値をユーザー情報変数にセットする
krtBlock.setVal('paramName', getQueryParameterValue(key));

2：URLから特定のパスの直後のパスを取得する

// 1：パスを指定
const specificPath = "path";

// 現在のページのパスを取得
const fullPath = window.location.pathname;

// 1のパスの後ろのパスを取得
let trailingPath = "";
const index = fullPath.indexOf(specificPath);
if (index !== -1) {
    const trailingPath = fullPath.slice(index + specificPath.length);
    const pathSegments = trailingPath.split('/').filter(segment => segment);
    if (pathSegments.length > 0) {
        nextPathSegment = pathSegments[0];
    }
}

// パスをユーザー情報変数にセットする
krtBlock.setVal('pathName', nextPathSegment);

3：URLから指定した位置のパスを取得する

// 1：パスの位置を指定
const n = 2;

// 現在のページのパスを取得
const fullPath = window.location.pathname;

// n番目のパス要素を取得する関数
function getNthPathSegment(path, n) {
    const pathSegments = path.split('/').filter(segment => segment);
    return pathSegments.length >= n ? pathSegments[n - 1] : null;
}

// パスをユーザー情報変数にセットする
const nthPathSegment = getNthPathSegment(fullPath, n);
krtBlock.setVal('pathName', nthPathSegment);

アイテム毎の表示/クリックを取得する

アイテム毎の表示・クリックをイベントとして送信します。
集計はKARTE Datahubを活用してパターンID毎に各イベントを集計して下さい。

表示

ブロックのSCRIPTに記述します。

krtBlock.on('dataLoaded', () => { 
  const table = krtBlock.getVal('test'); // test = アクションテーブル変数名
  console.log('table', {item: table, patternId: 'hogehoge'}); // hogehoge = パターンID※
 krt('send', '_blocks_view_item', {
  item: table,  
  patternId: 'hogehoge' // hogehoge = パターンID※
 });
});

※パターンIDは編集画面のURL末尾にpatternId=XXXの状態で表示されています。

クリック

ブロックのHTMLに記載します。

// krt-for（繰り返し設定）が存在する要素にJSを発火する処理を入れる
<li krt-for="item in data.test" @click="(function(event) { 
  // ページ遷移をキャンセル
  event.preventDefault();

  // KARTEにイベント送信
  const eventName = '_blocks_click_item';
  const payload = {item: item, patternId: 'hogehoge'};

  krt('send', eventName, payload);

  // クリックされた要素(div)の中から a タグを探し、その href 属性を取得する
  const linkElement = event.currentTarget.querySelector('a');
  if (linkElement) {
     const destinationURL = linkElement.href;
     window.location.href = destinationURL;
  }                                    
  })(event)">