profile API 説明用
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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