feat(mockup): Google Cloud advertiser takeover on Explore feed - #6333
Draft
tsahimatsliah wants to merge 6 commits into
Draft
feat(mockup): Google Cloud advertiser takeover on Explore feed#6333tsahimatsliah wants to merge 6 commits into
tsahimatsliah wants to merge 6 commits into
Conversation
Replaces every ad slot on the Explore feed with a randomized advertiser head card. Built advertiser-agnostic: Google Cloud is the first campaign in features/exploreAdMockup; adding a company (IBM, Kaiser, ...) is an assets file + a campaign object + one line in registry.ts. - 12 Google Cloud creatives (6 products x 2 headline versions) from the campaign asset tracker; illustrations embedded as base64 data URIs so the mockup is self-contained (no image hosting). - Card mirrors the real AdGrid/AdList (no CTA button, "Advertise here" / "Remove" footer) but always shows tags and "Promoted by Google Cloud". - Randomizes per mount; refreshing the feed reshuffles the creative. - Hardcoded demo toggle (exploreAdMockupEnabled) scoped to Explore feeds; getAd materializes slots regardless of ad serving / Plus so cards always appear. NOT a GrowthBook experiment — do not ship enabled to a production audience. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The feed's `content-visibility: auto` optimization reserves each grid cell at `contain-intrinsic-size: auto 24rem` — the `min-h-card` baseline every real grid card carries. The Google Cloud ad card used the bare `Card` (like AdGrid) with no `min-h-card`, so its height drifted from that estimate; when content-visibility skipped and repainted cells on scroll (experiment on for logged-in users), the ad cell destabilized and blanked into a hole. Pinning `min-h-card` aligns the ad card with the estimate and keeps it stable. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the hand-drawn four-color cloud mark with the official Google Cloud logo (techicons.dev / devicon googlecloud-original), embedded as a data URI on a white square so it reads inside the round card favicon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Turn the Storybook story into a shareable single-page overview (heading + all 6 products × 2 headline versions in a grid) for reviewing the campaign placements with the advertiser. Also triggers a fresh Storybook preview build so it reflects the official Google Cloud logo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Google's creative review (via Media Futures Group) flagged the BigQuery and
Cloud Run Display images as wrong. The original mapping was inferred from
unlabeled files; regenerate every product's illustration from the exact
tracker-named assets ("Main Marketing Image" column):
- BigQuery -> BigQuery_2025-cloud-illo-ai-data-1-RGB.png
- Cloud Run -> CloudRun_2025-cloud-illo-infrastructure-2-RGB.png
- Compute -> Compute_2025-cloud-illo-manufacturing-2-RGB.png
- Generic -> GenericGCP_2025-cloud-illo-global-scale-3-RGB.png
- Gemini -> GEAP_...Build-Use-AI-Responsibly_02-RGB.png
- Cloud SQL -> SQL_...Productivity-Workers-Developers_03-RGB.png
Each trimmed to content and centered on a white 1024x512 display canvas.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…orybook rebuild) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
capJavert
reviewed
Jul 28, 2026
capJavert
left a comment
capJavert
left a comment
Contributor
There was a problem hiding this comment.
This is not merge-safe as written: exploreAdMockupEnabled is hardcoded to true, which replaces every Explore ad slot and bypasses normal ad-serving/Plus gating in production. Please keep this preview-only, or make the production default false and gate activation through a safe runtime mechanism before requesting approval.
Member
Author
@capJavert it's a mockup only for the sales team, it's used only internally. No need to review. |
tsahimatsliah
marked this pull request as draft
July 29, 2026 11:57
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Campaign mockup: every ad slot on the Explore feed is replaced with a randomized Google Cloud advertiser card. Refreshing the feed reshuffles the creative. Built so we can add more advertisers with almost no code.
Where to look on the preview deploy
Explore feed and its tabs:
/posts,/posts/latest,/posts/upvoted,/posts/discussed,/explore/[tag]. Every ad slot is a Google Cloud card; scroll and refresh to see it cycle through the 12 creatives.Details
AdGrid/AdList: official Google Cloud logo, headline,#tags, "Promoted by Google Cloud", illustration, and the standard "Advertise here / Remove" footer. No CTA button — matches Carbon/EthicalAds feed ads and the tracker (CTA is email-digest only).min-h-cardso it stays stable under the feed'scontent-visibilityoptimization.Advertiser-agnostic by design
packages/shared/src/features/exploreAdMockup/. To add a company: addcampaigns/<company>/{images,campaign}.tsand one line inregistry.ts.Storybook
Features/ExploreAdMockup/Card → AllCreativesGridis a one-page overview of all 12 placements.Toggle / safety
Hardcoded demo switch
exploreAdMockupEnabled(config.ts), scoped to Explore feeds. Not a GrowthBook experiment — must not be shipped enabled to a production audience.🤖 Generated with Claude Code
Preview domain
https://google-cloud-ad-card-mockup.preview.app.daily.dev