mickeey2525/profile_api.js Secret

## profile_api.js
<!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>
	<!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>