Skip to content

Commit be9f9ee

Browse files
zapozapo
authored
Adjust LMPID demos and update prebid sdk (#54)
* Adjust lmpid demos and update prebid sdk * Update the email list to be more usable * Rehaul description * Align
1 parent cbad856 commit be9f9ee

File tree

3 files changed

+171
-82
lines changed

3 files changed

+171
-82
lines changed

‎demos/integration/lmpid-prebid-gpt.html.tpl

+120-45
Original file line numberDiff line numberDiff line change
@@ -26,80 +26,148 @@
2626
</div>
2727
<div class="row">
2828
<div class="twelve column">
29-
<h4>integration: Loblaw Media Private ID using Prebid.js</h4>
29+
<h4>Loblaw Media Private ID (LM PID) with Prebid.js and GPT</h4>
3030
</div>
3131
</div>
3232
<div class="row">
3333
<div class="twelve column">
3434
<h4>Publisher Setup</h4>
3535
<p>
36-
As a publisher, integrating your DCN with Loblaw Media Private ID is a simple way to activate your inventory
37-
with higher accuracy than traditional cohort-based targeting while preserving your users' privacy.
38-
This guide shows how to setup your Optable DCN in order to send Private ID data to Loblaw Media.
36+
The Optable web SDK enables easy deployment of the Loblaw Media Private ID (LM PID).
37+
The LM PID is generated automatically by the Optable Data Collaboration Platform for all
38+
identified users successfully matched with Loblaw Media.
3939
</p>
40-
41-
<h5>Step 1</h5>
4240
<p>
43-
Contact your Optable account manager to request access to the Loblaw Media integration on your node.
44-
<br/>
45-
Once setup, the Loblaw Media partner will appear in the connected partners list.
41+
This demo page shows an integration of LM PID deployed via Optable, with both Prebid.js
42+
with Loblaw Media's bidder adapter and user ID modules, as well as with
43+
Google Publisher Tag (GPT) and Google Ad Manager (GAM) Secure Signals. Whenever possible,
44+
it is recommended that both methods are enabled as shown in this demo page, such that
45+
the likelihood of Loblaw Media DSP (MediaAisle) bidding is maximised.
4646
</p>
4747

48-
<h5>Step 2</h5>
48+
<h5>Step 1: Request access</h5>
49+
<p>
50+
Contact your Optable account manager to request access to the Loblaw Media Private ID
51+
framework integration. Once configured and enabled, the Loblaw Media <strong>partner</strong>
52+
will appear connected in the <strong>Partnerships</strong> section of the Optable user interface.
53+
Additionally, you may start to see <i>incoming</i> activation clean rooms appear in the
54+
<strong>Clean Rooms</strong> section of the UI.
55+
</p>
4956
<p>
50-
Create a Web SDK source in your node. <br/>
51-
Unlike normal cohort based targeting that you need to activate explicitly, Loblaw Media Private ID is enabled by default on all matched users with your Loblaw Media partner.
57+
Please note that Steps 2-4 below should be repeated for each web site that you would like to enable
58+
LM PID on.
5259
</p>
5360

54-
<h5>Step 3</h5>
61+
<h5>Step 2: Create a Javascript SDK source</h5>
62+
<p>
63+
If your web site is not already represented by a <strong>source</strong> in your Optable
64+
Data Collaboration Node (DCN), create a <strong>Javascript SDK source</strong> and note its
65+
unique <i>slug</i> identifier, as well as the hostname of your DCN, as these will be required
66+
for Optable SDK integration (see Step 3).
67+
</p>
5568
<p>
56-
In order to communicate Private ID's to Loblaw Media from your Web SDK source, depending on how you generated your Prebid.js distribution, you may need to update it to include <code>mabidder</code> bidder. See <a target="_blank" rel="noopener" href="https://docs.prebid.org/download.html">https://docs.prebid.org/download.html</a>.<br/>
69+
Loblaw Media Private ID will be returned by your Optable DCN for all users associated with
70+
activation clean room match results originating from the Loblaw Media partner.
71+
</p>
5772

58-
Make sure to include the <code>mabidder</code> bidder your <code>addAdUnits()</code> Prebid.js's call, and to enable the <code>lmpid</code> user ID module. See <a target="_blank" rel="noopener" href="https://docs.prebid.org/dev-docs/modules/userId.html#user-id-sub-modules">https://docs.prebid.org/dev-docs/modules/userId.html</a>.<br/>
73+
<h5>Step 3: Deploy Optable's Javascript SDK to your site</h5>
74+
<p>
75+
If you haven't already deployed the Optable Javascript SDK to your web site, have a look at the
76+
<a target="_blank" rel="noopener" href="https://github.com/Optable/optable-web-sdk#installing">Optable Javascript SDK README</a>. There are two SDK APIs which you must deploy in order to integrate LM PID:
77+
<a target="_blank" rel="noopener" href="https://github.com/Optable/optable-web-sdk#identify-api">identify</a>
78+
and
79+
<a target="_blank" rel="noopener" href="https://github.com/Optable/optable-web-sdk#targeting-api">targeting</a>.
80+
</p>
81+
<p>
82+
The <code>identify</code> API enables you to associate a user's browser with a known identifier, such
83+
as an email address or an assigned user ID. Since Loblaw Media activation matches operate on a
84+
combination of email address, phone number, and mobile advertising IDs, it is recommended that you
85+
<code>identify</code> consenting users with all of that user's known and consented ad IDs.
86+
You can do this by calling
87+
<code>identify</code> with additional identifiers directly from your web site, or by calling
88+
it with a single known user ID, and separately loading identity mappings (associated with the
89+
known user ID) via any
90+
<a target="_blank" rel="noopener" href="https://docs.optable.co/optable-documentation/integrations/sources">supported sources</a>.
91+
</p>
92+
<p>
93+
The <code>targeting</code> API retrieves targeting data, including the LM PID when available,
94+
and stores it in browser local storage for subsequent retrieval.
95+
</p>
5996

60-
Similarly to audience targeting, Private IDs are automatically passed down in edge targeting responses for all SDK sources and cached for consumption by other libraries.
97+
<h5>Step 4: Prebid.js and GPT integrations</h5>
98+
<p>
99+
For Prebid.js installations, you must make sure to include the <code>mabidder</code> bidder adapter and
100+
the <code>lmpid</code> user ID module. Note that you must include <code>mabidder</code> in the
101+
<code>addAdUnits()</code> call.
102+
See
103+
<a target="_blank" rel="noopener" href="https://docs.prebid.org/download.html">Prebid.js download instructions</a>
104+
and
105+
<a target="_blank" rel="noopener" href="https://docs.prebid.org/dev-docs/modules/userId.html#user-id-sub-modules">Prebid.js user ID modules</a>
106+
for details.
107+
</p>
108+
<p>
109+
For Google Publisher Tag (GPT), you must call the <code>installGPTSecureSignals()</code> API
110+
shortly after Optable SDK instantiation. This API will configure GPT to pass <code>lmpid</code>
111+
to Google Ad Manager (GAM), when it is available in browser local storage.
61112
</p>
62113
<p>
63-
Example of a full integration snippet which configures Prebid.js and GPT. <br/>
64-
While the userId module is responsible of passing the user's Private ID to Loblaw Media bidder (mabidder), it's also being passed to GAM through secure signals by using <code>installGPTSecureSignals</code>.<br/>
65-
Note that this function uses targeting cache internally, which is why in the following example we propose to install the secure signal provider only once targeting cache as been populated.
114+
Try to call the Optable SDK <code>targeting()</code> API as early as possible. This API will
115+
retrieve the latest <code>lmpid</code>, when it is enabled and available for the current user,
116+
and store it in browser local storage for retrieval by both Prebid.js and GPT as previously described.
117+
</p>
66118

119+
<h5>Prebid.js and GPT integration example</h5>
120+
<p>
121+
While the <code>lmpid</code> user ID module passes the Loblaw Media Private ID to the
122+
Loblaw Media bidder (mabidder), the <code>installGPTSecureSignals()</code> API in Optable's
123+
Javascript SDK exposes it to Google Ad Manager via
124+
<a href="https://support.google.com/admanager/answer/10488752?hl=en">Secure Signals</a>.
125+
Please make sure to follow Google's instructions for enabling Secure Signals sharing on your websites.
126+
</p>
127+
<p>
128+
The code snippet below shows an example integration with both Prebid.js and GPT on page. Note
129+
that <code>{OPTABLE_DCN_HOST}</code> and <code>{OPTABLE_DCN_SOURCE_SLUG}</code> must be replaced
130+
with your Optable Data Collaboration Node (DCN) hostname and Javascript SDK source slug, respectively.
131+
</p>
132+
<p>
67133
<pre><code style="padding: 20px">// Setup Optable, Prebid.js and GPT SDKs.
68134
window.optable = window.optable || { cmd: [] };
69135
window.googletag = window.googletag || { cmd: [] };
70136
window.pbjs = window.pbjs || { que: [] };
71137

138+
// When optable SDK is loaded, initialize it and install GPT Secure Signals provider.
72139
optable.cmd.push(function () {
73140
optable.instance = new optable.SDK({
74-
host: "{MY_NODE_HOST}",
75-
site: "{MY_NODE_ORIGIN}",
141+
host: "{OPTABLE_DCN_HOST}",
142+
site: "{OPTABLE_DCN_SOURCE_SLUG}",
76143
});
77144

78-
// Update cached targeting, then install Loblaw Media Private ID secure signal provider.
79-
optable.instance.targeting().then(() => {
80-
optable.instance.installGPTSecureSignals();
81-
});
145+
optable.instance.installGPTSecureSignals();
146+
optable.instance.targeting();
82147
});
83148

84-
// Disable initial GPT load
149+
// Disable initial GPT load, required for Prebid.js
85150
googletag.cmd.push(function () {
86151
googletag.pubads().disableInitialLoad();
87152
});
88153

154+
// When prebid SDK is loaded, configure it to use LMPID user ID module and
155+
// request bids for the defined ad units.
156+
89157
pbjs.que.push(function () {
90-
// Enable Loblaw Media Private ID user ID module
158+
// Enable Loblaw Media Private ID user ID module (lmpid):
91159
pbjs.setConfig({ userSync: { userIds: [{ name: "lmpid" }] } })
92160

93161
// Configure some ad units.
94-
// Note that while it's not relevant for Private ID integration,
162+
// Note that while it's not relevant for LMPID integration,
95163
// Loblaw Media's prebid ad server currently requires passing a ppid.
96164
pbjs.addAdUnits([{
97165
code: "/my/slot", // must match the defined ad slots below
98166
mediaTypes: { banner: { sizes: [[728, 90]] } },
99167
bids: [{ bidder: "mabidder", params: { ppid: "{MY_PPID}" }}],
100168
}]);
101169

102-
// Define some slots and request bids through Prebid.js.
170+
// Define some slots
103171
googletag.cmd.push(function() {
104172
googletag
105173
.defineSlot("/my/slot", [[728, 90]], "ad")
@@ -110,31 +178,39 @@ pbjs.que.push(function () {
110178
111179
googletag.display("ad");
112180
181+
// Request bids through Prebid.js.
113182
pbjs.requestBids({
114183
bidsBackHandler: function() {
184+
// Set targeting in matching GPT ad slots
115185
pbjs.setTargetingForGPTAsync();
186+
187+
// Request ads
116188
googletag.pubads().refresh();
117189
},
118190
});
119191
});
120192
});
121193
</code></pre>
122194
</p>
195+
123196
<h4>Try it!</h4>
124197
<p>
125198
This demo page is setup so that the following random emails are generating Private ID requests.
126-
<br/>Make sure to <a target="_blank" id="identify-link">Identify</a> using one of the following identifiers.
127-
128-
<pre><code style="padding: 20px">e:da1fead79be2dd0fc0450bc6e8157cb42f5289261b3d829108395dd8454056d6
129-
e:a14918ffa4c3e90b81153fa78eae2175161ac6741bf0ce91e529a22c18d309c3
130-
e:0336cbdb1a44e26276b48fee0c70d25bf0f6adeca86642a4d0b084190de7027a
131-
e:76ee2b2bd51c3fad442f5355f26e0224c7c5a96cee8272aa87830da347db1313
132-
e:31d6da0fbac2e5039646b8817ea50a3dae26537de7cb833b6e759eba779fcc5d
133-
e:58e9f67ed2711bf874bfc19615d2d0cb9aca9200515513495f0d70475e9dc590
134-
e:0bd4d8d8de86dd6bca2e096fbdd111c1ad87046b1df3240eb0eb8bf41c6d98a1
135-
e:06e91979bf00a1a3b69d93f36d9488336689e769632346b853ca9f8a00f423b7
136-
e:26283d3669f4edf35f17b98f5031277842ffb7547af81b7546d279b0934913ba
137-
e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
199+
</p>
200+
<p>
201+
To trigger LM PID insertion in ad requests, you must first
202+
<a target="_blank" id="identify-link">identify</a> using one of the following test email identifiers:
203+
204+
<pre><code style="padding: 20px">john.doe@acme.test
205+
emily.smith@acme.test
206+
alexander.wilson@acme.test
207+
sarah.johnson@acme.test
208+
david.thompson@acme.test
209+
lisa.brown@acme.test
210+
jason.miller@acme.test
211+
jessica.wright@acme.test
212+
matthew.harris@acme.test
213+
olivia.anderson@acme.test</code></pre>
138214
</p>
139215
</div>
140216
</div>
@@ -193,9 +269,8 @@ e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
193269
cookies: cookiesTransport,
194270
});
195271
196-
optable.instance.targeting().then(() => {
197-
optable.instance.installGPTSecureSignals();
198-
});
272+
optable.instance.installGPTSecureSignals();
273+
optable.instance.targeting();
199274
});
200275
201276
googletag.cmd.push(function () {
@@ -205,7 +280,7 @@ e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
205280
pbjs.que.push(function () {
206281
pbjs.setConfig({
207282
userSync: { userIds: [{ name: "lmpid" }] },
208-
})
283+
});
209284
210285
pbjs.addAdUnits([
211286
{

‎demos/integration/lmpid-signal-gpt.html.tpl

+46-32
Original file line numberDiff line numberDiff line change
@@ -62,52 +62,58 @@
6262
window.optable = window.optable || { cmd: [] };
6363
window.googletag = window.googletag || { cmd: [] };
6464

65-
// When optable SDK is loaded, initialize it, update targeting data, and install its GPT Secure Signals provider.
65+
// When optable SDK is loaded, initialize it and install GPT Secure Signals provider.
6666
optable.cmd.push(function () {
6767
optable.instance = new optable.SDK({
68-
host: "{MY_NODE_HOST}",
69-
site: "{MY_NODE_ORIGIN}"
68+
host: "{OPTABLE_DCN_HOST}",
69+
site: "{OPTABLE_DCN_SOURCE_SLUG}",
7070
});
7171

72-
// Update cached targeting, then install Loblaw Media Private ID secure signal provider.
73-
optable.instance.targeting().then(() => {
74-
optable.instance.installGPTSecureSignals();
75-
});
72+
optable.instance.installGPTSecureSignals();
73+
optable.instance.targeting()
7674
});
7775

78-
// Define some Ad slots and request bids through Prebid.js.
76+
// When GPT SDK is loaded, define and prepare an ad slot.
77+
// Note that we disableInitialLoad() in order to defer the first ad request
78+
// until secure signals are installed.
7979
googletag.cmd.push(function() {
80+
googletag.pubads().disableInitialLoad();
81+
8082
googletag
8183
.defineSlot('/my/slot', [[728, 90]], "ad")
8284
.addService(googletag.pubads());
8385
8486
googletag.pubads().enableSingleRequest();
8587
googletag.enableServices();
88+
googletag.display("ad");
8689
});
8790

88-
...
89-
90-
// Display
91-
googletag.cmd.push(function() {
92-
googletag.display('ad'); });
93-
})
91+
// Explicitly refresh ads when everything is loaded and the above setup is done.
92+
googletag.cmd.push(function () {
93+
optable.cmd.push(function () {
94+
googletag.pubads().refresh();
95+
});
96+
});
9497
</code></pre>
9598
</p>
9699
<h4>Try it!</h4>
97100
<p>
98101
This demo page is setup so that the following random emails are generating Private ID requests.
99-
<br/>Make sure to <a target="_blank" id="identify-link">Identify</a> using one of the following identifiers.
100-
101-
<pre><code style="padding: 20px">e:da1fead79be2dd0fc0450bc6e8157cb42f5289261b3d829108395dd8454056d6
102-
e:a14918ffa4c3e90b81153fa78eae2175161ac6741bf0ce91e529a22c18d309c3
103-
e:0336cbdb1a44e26276b48fee0c70d25bf0f6adeca86642a4d0b084190de7027a
104-
e:76ee2b2bd51c3fad442f5355f26e0224c7c5a96cee8272aa87830da347db1313
105-
e:31d6da0fbac2e5039646b8817ea50a3dae26537de7cb833b6e759eba779fcc5d
106-
e:58e9f67ed2711bf874bfc19615d2d0cb9aca9200515513495f0d70475e9dc590
107-
e:0bd4d8d8de86dd6bca2e096fbdd111c1ad87046b1df3240eb0eb8bf41c6d98a1
108-
e:06e91979bf00a1a3b69d93f36d9488336689e769632346b853ca9f8a00f423b7
109-
e:26283d3669f4edf35f17b98f5031277842ffb7547af81b7546d279b0934913ba
110-
e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
102+
</p>
103+
<p>
104+
To trigger LM PID insertion in ad requests, you must first
105+
<a target="_blank" id="identify-link">identify</a> using one of the following test email identifiers:
106+
107+
<pre><code style="padding: 20px">john.doe@acme.test
108+
emily.smith@acme.test
109+
alexander.wilson@acme.test
110+
sarah.johnson@acme.test
111+
david.thompson@acme.test
112+
lisa.brown@acme.test
113+
jason.miller@acme.test
114+
jessica.wright@acme.test
115+
matthew.harris@acme.test
116+
olivia.anderson@acme.test</code></pre>
111117
</p>
112118
</div>
113119
</div>
@@ -160,12 +166,14 @@ e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
160166
insecure: JSON.parse("${SANDBOX_INSECURE}"),
161167
cookies: (new URLSearchParams(window.location.search)).get("cookies") === "yes",
162168
});
163-
optable.instance.targeting().then(() => {
164-
optable.instance.installGPTSecureSignals();
165-
});
166-
});
167169
168-
googletag.cmd.push(function() {
170+
optable.instance.installGPTSecureSignals();
171+
optable.instance.targeting();
172+
})
173+
174+
googletag.cmd.push(function () {
175+
googletag.pubads().disableInitialLoad();
176+
169177
googletag
170178
.defineSlot('/22081946781/web-sdk-demo-securesignals/header-ad', [728, 90], 'div-gpt-ad-1682350431454-0')
171179
.addService(googletag.pubads());
@@ -184,7 +192,13 @@ e:5d6d6ed5354f68d7523b7b39330145346209d20b06f5ed32373583823bac8d1a</code></pre>
184192
googletag.display('div-gpt-ad-1682350431454-0');
185193
googletag.display('div-gpt-ad-1682350702718-0');
186194
googletag.display('div-gpt-ad-1682350744052-0');
187-
});
195+
})
196+
197+
googletag.cmd.push(function () {
198+
optable.cmd.push(function () {
199+
googletag.pubads().refresh();
200+
})
201+
})
188202
</script>
189203
</div>
190204
</body>

‎demos/integration/prebid.js

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)