CINXE.COM

<!DOCTYPE html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>馃彔 Demo: Attribution Reporting API</title><link rel="stylesheet" href="/styles.css"><link rel="stylesheet" href="/shared.styles-browser-setup.css"></head><body><div id="setup-issues-banner" style="display:none">Make sure to follow the <a href="https://arapi-home.web.app/#browser-setup">browser setup instructions</a>. <div id="setup-issues-list"></div></div><div class="main"><h1>Demo: Attribution Reporting API</h1><div class="version">Demo version: v-2023-05-02</div><h2>Ask questions / Share feedback 馃憢</h2><div id="feedback"><strong>Is there a feature you'd like to see added to this demo? Do you have any questions, requests, or issues running the demo? </strong><br>We want to hear from you. <a href="https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/issues/new/choose" noreferrer noopener target="_blank">Open an issue on our dev support repo</a> and select the type Attribution Reporting (or <a href="https://groups.google.com/u/0/a/chromium.org/g/attribution-reporting-api-dev" noreferrer noopener target="_blank">ask your question on the developer mailing list</a>).</div><h2>See the code </h2><a href="https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/attribution-reporting" noreferrer noopener target="_blank">Code for this demo</a>. You can <a href="https://github.com/GoogleChromeLabs/trust-safety-demo/tree/main/attribution-reporting#fork-and-customize" noreferrer noopener target="_blank">reuse and customize it</a>.<section id="browser-setup"><h2>Set up your browser</h2><p class="important">鈿狅笍 Make sure to follow these instructions.<h3>Browser requirements</h3><ul><li id="browserVersionRequirementsEl"></li><li>Don't use Incognito or Guest mode, because the API is disabled on these profiles.</li><li>Don't block third-party cookies. </li><li>Deactivate ad-blocking extensions on the pages where you need to test the API (or create a fresh user profile without extensions). Ad-blocking browser extensions may block some of the API's functionality if script names contain the term "ad".</li></ul><h3>Setup (may require browser restart)</h3><ul><li>Ensure the Privacy Sandbox APIs are enabled at </li><span class="code select">chrome://settings/privacySandbox</span>.<li>Enable the flag <span class="code select">chrome://flags/#privacy-sandbox-ads-apis </span>(will require restart). </li></ul></p></section><h2>Run the demo</h2><p>In this demo an advertiser uses an adtech provider to run their ads on a publisher site. Follow the flow below to see how the API generates event-level and aggregatable reports:</p><ol><li>First visit the <a href="https://arapi-publisher.web.app" target="_blank">publisher site</a> and view and/or click an ad on that site. <ol>Because this ad is configured with special attribution parameters, a source event is registered. You'll see that either anchor elements or JavaScript calls can be used to generate a source event.</ol></li><li>Second, either follow the link for a clickable ad or visit the <a href="https://arapi-advertiser.web.app" target="_blank">advertiser site</a> directly (direct visits will *not* trigger a conversion)</li><li>Third, interact with the product on the <a href="https://arapi-advertiser.web.app" target="_blank">advertiser site</a> by visiting the product page, adding the product to your cart, or making a purchase... <ol>While interacting with the product, the adtech endpoint will be informed. It decides that your actions are conversions, and hence will trigger attributions, with variable trigger data values, for your engagements on the advertiser's site.</ol><ol>After attributions have been triggered, attribution reports are generated and stored in local storage in your browser (on your device). </ol></li><li>Finally, open <span class="code select">chrome://attribution-internals </span>to inspect the reports that have been generated.<ol>The reports are configured to be sent to the adtech provider setup in Step 1</ol></li></ol><h2>Next Steps</h2><p>Now that you've learned how <a href="https://github.com/WICG/attribution-reporting-api/blob/main/EVENT.md#attribution-reports" noreferrer noopener target="_blank">event-level reports</a> and <a href="https://github.com/WICG/attribution-reporting-api/blob/main/AGGREGATE.md#aggregatable-reports" noreferrer noopener target="_blank">aggregatable reports</a> are generated, learn how to collect and process aggregatable reports with the <a href="https://github.com/google/trusted-execution-aggregation-service" noreferrer noopener target="_blank">aggregation service</a>.</p><script type="text/javascript" src="shared.browser-setup.js"></script></div></body>