Skip to content

Instantly share code, notes, and snippets.

@mickeey2525
Last active Aug 27, 2021
Embed
What would you like to do?
profile API 説明用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./style/global.css">
<title>td-js-sdk-sample Page</title>
<script>
!function (t, e) { if (void 0 === e[t]) { e[t] = function () { e[t].clients.push(this), this._init = [Array.prototype.slice.call(arguments)] }, e[t].clients = []; for (var r = ["addRecord", "blockEvents", "fetchServerCookie", "fetchGlobalID", "fetchUserSegments", "resetUUID", "ready", "setSignedMode", "setAnonymousMode", "set", "trackEvent", "trackPageview", "trackClicks", "unblockEvents"], s = 0; s < r.length; s++) { var c = r[s]; e[t].prototype[c] = function (t) { return function () { return this["_" + t] = this["_" + t] || [], this["_" + t].push(Array.prototype.slice.call(arguments)), this } }(c) } var n = document.createElement("script"); n.type = "text/javascript", n.async = !0, n.src = ("https:" === document.location.protocol ? "https:" : "http:") + "//cdn.treasuredata.com/sdk/2.5/td.min.js"; var o = document.getElementsByTagName("script")[0]; o.parentNode.insertBefore(n, o) } }("Treasure", this);
</script>
<script>
const td = new Treasure({
database: 'profile_api_tutorial',
host: 'in.treasuredata.com',
});
td.setSignedMode();
td.set('$global', 'td_global_id', 'td_global_id');
td.trackPageview('sample_pageviews');
const successCallback = (res) => {
console.log(`The whole response is ${JSON.stringify(res)}`)
console.log(res)
const fetchSegmentResult = document.getElementById('segment')
fetchSegmentResult.innerHTML = `<p class="card-body">The segment ids are ${res[0].values}</p>
<p class="card-body">Attributes are ${JSON.stringify(res[0].attributes)}</p>
`
};
const errorCallback = (error) => {
console.log(`Failed to load profile. Error: ${error}`)
};
const showProfileInfo = () => {
const textbox = document.getElementById("input-message");
userId = textbox.value;
td.fetchUserSegments({
audienceToken: ['6f5e06ca-af35-4d65-8761-5a2777075702'],
keys: {
user_id: userId
}
}, successCallback, errorCallback)
}
</script>
</head>
<body>
<div class="text-center">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">TD JS SDK Sample Page</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.treasuredata.com/display/public/PD/Product+Documentation+Home">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="border-dark" style="margin-top: 10px">
<h4 >1. What is this?</h4>
<p class="text-center">これはProfile APIの挙動を確認するためのサンプルページです。</p>
</div>
<div style="margin-top: 10px">
<h4>2. 挙動の確認</h4>
<p>以下のUser IDのうちいずれかを入力してみましょう。</p>
<table class="table" style="width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 10px; border-color: black;">
<caption>Sample Data</caption>
<thead>
<tr>
<th scope="col">User ID</th>
<th scope="col">性別(gen)</th>
<th scope="col">居住国</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST01797576</td>
<td>m</td>
<td>Japan</td>
</tr>
<tr>
<td>TEST06609950</td>
<td>f</td>
<td>Japan</td>
</tr>
</tbody>
</table>
<p>User IDを選択してSearch Buttonをおしてください。</p>
<div class="card" style="width: 50%; margin-left: auto; margin-right: auto;">
<p class="card-header">The Sample Result</p>
<div id="segment">
<p class="card-body">The segment ids will be displayed here</p>
<p class="card-body">The Attributes of the user will be displayed here</p>
</div>
<div>
<form id="segment-id" action="#" class="d-flex" style="width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 10px;">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="input-message">
<button class="btn btn-outline-success" type="submit" onclick="showProfileInfo()">Search</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment