-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for in-band passport transport (#26)
* Regen targeting/prebid-us-east-16.html * Add support for in-band passport transport When configuring an instance of OptableSDK, we now support a `cookies` attribute (`true` by default) which, when set to `false`, will cause the SDK to use "in-band" passport transport, more specifically: - The `passport` parameter will be set in the query string in each network call to the sandbox - The sandbox will return a `passport` attribute in any successful JSON response payload - The SDK will attempt to read the returned `passport` attribute and store it in LocalStorage, scoped to the sandbox host and site slug with which the OptableSDK instance was instantiated - At the subsequent network call to the sandbox, any passport value previously stored in LocalStorage will be retrieved and passed back to the sandbox as the `passport` query string parameter value Also updates README for in-band passport transport, and adds demos for the in-band passport transport case which can be browsed from .../demos/index-nocookies.html Depends on optable-sandbox PR419: Optable/optable-sandbox#419 * Delete the passport from the returned payload. This is done when the passport is passed "in-band" and it is done because the targeting edge handler was initially made to return targeting data directly in the form of 'key values' on the returned JSON payload -- if we don't delete the `passport` attribute here, it may end up sent as targeting data to ad servers. Not the end of the world, but something we want to avoid due to passport size.
- Loading branch information
Showing
25 changed files
with
2,857 additions
and
8 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| .prettierrc | ||
| browser/dist | ||
| lib/dist | ||
| demos/publishers | ||
| demos/vanilla/nocookies/targeting/prebid*.js | ||
| demos/vanilla/targeting/prebid*.js |
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Optable Web SDK Demos</title> | ||
| <meta name="description" content="Optable Web SDK Demos" /> | ||
| <meta name="author" content="optable.co" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" /> | ||
| <link rel="stylesheet" href="css/normalize.css" /> | ||
| <link rel="stylesheet" href="css/skeleton.css" /> | ||
| <link rel="icon" type="image/png" href="/images/favicon.png" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="twelve column" style="margin-top: 5%;"> | ||
| <a href="/index-nocookies.html"><img src="/images/logo.png" width="200" /></a> | ||
| <hr /> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="twelve column"> | ||
| <h4>👋 demo.optable.co (cookies=false)</h4> | ||
| <p> | ||
| To learn about optable-web-sdk integration on your web site or application, see the latest releases, or | ||
| report an issue, please check out the | ||
| <a href="https://github.com/Optable/optable-web-sdk">web-sdk GitHub README</a>. If you're looking for more | ||
| information on Optable itself, visit <a href="https://optable.co/">our company site</a>. | ||
| </p> | ||
| <p> | ||
| In all examples below, the Optable demo environment is used. Data stored by the demo environment is | ||
| periodically deleted. | ||
| </p> | ||
| <p> | ||
| <strong | ||
| >Note that the examples below initialize the OptableSDK with cookies=false, so all ID transport is done | ||
| using browser LocalStorage.</strong | ||
| > | ||
| Generally, it is preferable to use secure first party HTTP-only cookies for transporting IDs from | ||
| OptableSDK. However, when the integrating website does not share the same top-level domain name with the | ||
| Optable Sandbox, then first party cookies are not reliable, and the LocalStorage method is suggested. To | ||
| enable it, simply initialize the OptableSDK object with the <code>cookies</code> option set to | ||
| <code>false</code>, and the SDK will do the rest. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="twelve column"> | ||
| <h5>Examples</h5> | ||
| <table class="u-full-width"> | ||
| <thead> | ||
| <tr> | ||
| <th>Link</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><a href="/vanilla/nocookies/identify.html">identify API</a></td> | ||
| <td> | ||
| Simple <code>script</code> tag integration showing how to send a hashed Email address and optional | ||
| publisher user ID to your sandbox. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td><a href="/vanilla/nocookies/witness.html">witness API</a></td> | ||
| <td>Shows how to log events with optional properties to your sandbox.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><a href="/vanilla/nocookies/profile.html">profile API</a></td> | ||
| <td>Shows how to set visitor traits (e.g., <code>age=45</code>) and sync them to your sandbox.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><a href="/vanilla/nocookies/targeting/gam360.html">targeting & GAM360 activation</a></td> | ||
| <td> | ||
| Shows how to load active cohorts for a visitor and pass them to | ||
| <a href="https://admanager.google.com/home/">Google Ad Manager</a> (GAM) via the | ||
| <a href="https://developers.google.com/publisher-tag/guides/get-started">Google Publisher Tag</a> for | ||
| ad targeting. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <a href="/vanilla/nocookies/targeting/gam360-cached.html">cached targeting & GAM360 activation</a> | ||
| </td> | ||
| <td> | ||
| Shows how to load and cache active cohorts in a visitor's browser. Separately, cached cohorts are | ||
| passed to <a href="https://admanager.google.com/home/">Google Ad Manager</a> (GAM) via the | ||
| <a href="https://developers.google.com/publisher-tag/guides/get-started">Google Publisher Tag</a> for | ||
| ad targeting. | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="twelve column" style="font-size: 0.8rem; padding: 10px;"> | ||
| <center> | ||
| <a href="https://www.optable.co/">Home</a> | <a href="https://www.optable.co/company/contact">Contact</a> | | ||
| <a href="https://optable.co/privacy">Privacy</a> | | ||
| <a href="https://www.linkedin.com/company/optableco/">LinkedIn</a> | | ||
| <a href="https://twitter.com/optable_co">Twitter</a> | ||
| </center> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Optable Web SDK Demos</title> | ||
| <meta name="description" content="Optable Web SDK Demos" /> | ||
| <meta name="author" content="optable.co" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" /> | ||
| <link rel="stylesheet" href="/css/normalize.css" /> | ||
| <link rel="stylesheet" href="/css/skeleton.css" /> | ||
| <link rel="icon" type="image/png" href="/images/favicon.png" /> | ||
|
|
||
| <!-- Optable web-sdk loader start --> | ||
| <script type="text/javascript"> | ||
| window.optable = window.optable || { cmd: [] }; | ||
|
|
||
| optable.cmd.push(function () { | ||
| optable.instance = new optable.SDK({ | ||
| host: "localhost", | ||
| site: "web-sdk-demo", | ||
| insecure: JSON.parse("true"), | ||
| cookies: false, | ||
| }); | ||
|
|
||
| optable.instance.tryIdentifyFromParams(); | ||
| }); | ||
| </script> | ||
| <script async src="http://localhost:8081/sdk.js"></script> | ||
| <!-- Optable web-sdk loader end --> | ||
|
|
||
| <style> | ||
| .code-result { | ||
| padding: 0.2rem 0.5rem; | ||
| margin: 0 0.2rem; | ||
| font-size: 90%; | ||
| background: #f1f1f1; | ||
| border: 1px solid #e1e1e1; | ||
| border-radius: 4px; | ||
| display: block; | ||
| padding: 1rem 1.5rem; | ||
| white-space: pre; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="twelve column" style="margin-top: 5%;"> | ||
| <a href="/index-nocookies.html"><img src="/images/logo.png" width="200" /></a> | ||
| <hr /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="twelve column"> | ||
| <h4>Example: identify API</h4> | ||
| <p> | ||
| Simple <code>script</code> tag integration showing how to send a hashed Email address and optional publisher | ||
| user ID to your sandbox. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="twelve column"> | ||
| <fieldset> | ||
| <div> | ||
| <label for="email-checked"><input id="email-checked" type="checkbox" checked /> Email Address:</label> | ||
| <input id="email" type="email" size="64" /> | ||
| </div> | ||
| <br /> | ||
| <div> | ||
| <label for="ppid-checked"><input id="ppid-checked" type="checkbox" /> Send PPID:</label> | ||
| <input id="ppid" type="text" size="64" disabled /> | ||
| </div> | ||
| <br /> | ||
| <button id="identify-button" class="button-primary">Identify</button> | ||
| </fieldset> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="twelve column code-result" id="result"></div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="twelve column" style="font-size: 0.8rem; padding: 10px;"> | ||
| <center> | ||
| <a href="https://www.optable.co/">Home</a> | <a href="https://www.optable.co/company/contact">Contact</a> | | ||
| <a href="https://optable.co/privacy">Privacy</a> | | ||
| <a href="https://www.linkedin.com/company/optableco/">LinkedIn</a> | | ||
| <a href="https://twitter.com/optable_co">Twitter</a> | ||
| </center> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.getElementById("email-checked").onchange = function () { | ||
| document.getElementById("email").disabled = !this.checked; | ||
| }; | ||
|
|
||
| document.getElementById("ppid-checked").onchange = function () { | ||
| document.getElementById("ppid").disabled = !this.checked; | ||
| }; | ||
|
|
||
| document.getElementById("identify-button").addEventListener("click", () => { | ||
| const emailCb = document.getElementById("email-checked"); | ||
| const ppidCb = document.getElementById("ppid-checked"); | ||
| const result = document.getElementById("result"); | ||
|
|
||
| var email = null; | ||
| var ppid = null; | ||
| result.innerHTML = ""; | ||
|
|
||
| if (emailCb.checked) { | ||
| email = document.getElementById("email").value; | ||
| result.innerHTML += "Email: " + email + " (" + optable.SDK.eid(email) + ")<br />"; | ||
| } | ||
|
|
||
| if (ppidCb.checked) { | ||
| ppid = document.getElementById("ppid").value; | ||
| result.innerHTML += "PPID: " + ppid + " (" + optable.SDK.cid(ppid) + ")<br />"; | ||
| } | ||
|
|
||
| optable.instance | ||
| .identify(optable.SDK.eid(email), optable.SDK.cid(ppid)) | ||
| .then(function () { | ||
| result.innerHTML += "Sent"; | ||
| }) | ||
| .catch((err) => { | ||
| result.innerHTML += "Error:<br />" + err.message; | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.