docs(carbon ads): integrate Carbon Ads

[sayzlim]

Change docs-content-layout to client component.

• I have followed the Your First Code Contribution section of the Contributing guide

Integrate Carbon Ads into the documentation and homepage. There is a change to the docs-content-layout to client component because we need useEffect to inject Carbon script into the component where the ad should be visible. Here are the screenshots of how the ad looks like:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2023 9:48am

[zoltanszogyenyi]

Hey @sayzlim,

Thanks for helping with the Carbon Ads integration.

First of all, I've moved the ad to the bottom right side of the page similar to how we have it for flowbite.com.

There's an issue that it seems like it's duplicated after rendering, there are also some errors in the console which I think are happening because of the bad rendering of the ads.

Here's how it looks for me:

Also, let's please keep the original styles and CSS classes to keep consistency across the websites.

I've made the adjusments back myself.

Cheers,
Zoltan

[codecov]

Codecov Report

Patch coverage: 99.82% and project coverage change: -0.02 ⚠️

Comparison is base (7461173) 99.54% compared to head (b298e7f) 99.53%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #879      +/-   ##
==========================================
- Coverage   99.54%   99.53%   -0.02%     
==========================================
  Files         163      166       +3     
  Lines        6621     6879     +258     
  Branches      401      418      +17     
==========================================
+ Hits         6591     6847     +256     
- Misses         30       32       +2     

Impacted Files	Coverage Δ
src/components/Toast/theme.ts	100.00% <ø> (ø)
src/components/Dropdown/Dropdown.tsx	99.22% <99.41%> (-0.78%)	⬇️
src/components/Button/Button.tsx	100.00% <100.00%> (ø)
src/components/Button/ButtonBase.tsx	100.00% <100.00%> (ø)
src/components/Button/theme.ts	100.00% <100.00%> (ø)
src/components/Card/Card.tsx	100.00% <100.00%> (ø)
src/components/Carousel/Carousel.tsx	99.02% <100.00%> (+0.06%)	⬆️
src/components/DarkThemeToggle/DarkThemeToggle.tsx	100.00% <100.00%> (ø)
src/components/Dropdown/DropdownItem.tsx	100.00% <100.00%> (ø)
src/components/Dropdown/theme.ts	100.00% <100.00%> (ø)
... and 15 more

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[zoltanszogyenyi]

Also, not sure it's a good idea to change it to a client component as it introduced a lot of errors in the console:

Need your opinion on this @tulup-conner too.

Update: fixed most of the errors by removing the use client directive from docs-content-layout.

[sayzlim]

@zoltanszogyenyi duplicate ad is expected if you run in dev mode due to how React runs every component twice to catch issues or errors. If you run npm run build and test the built site with npm run start, the ad should only appear once per page. I don't see any errors when checking the built site.

I will defer to @tulup-conner for the best practice here. Ideally we keep the ad in the documentation (better mobile visibility too) so we don't have to set fixed positioning for the ad, but it's also okay if you don't mind having the fixed ad on the docs.

[zoltanszogyenyi]

To be fixed before we can merge this PR:

• the ad should re-render as you navigate through pages to correctly resemble impressions and revenue
• fix the duplicate render visually
• keep the styles original styles and width
• no new errors introduced (I removed the use client which introduced most of them)

[zoltanszogyenyi]

@zoltanszogyenyi duplicate ad is expected if you run in dev mode due to how React runs every component twice to catch issues or errors. If you run npm run build and test the built site with npm run start, the ad should only appear once per page. I don't see any errors when checking the built site.

I will defer to @tulup-conner for the best practice here. Ideally we keep the ad in the documentation (better mobile visibility too) so we don't have to set fixed positioning for the ad, but it's also okay if you don't mind having the fixed ad on the docs.

Hey, Lim!

Mobile views for Flowbite React based on our analytics are below 5% - but we can still show it on mobile devices. I prefer to show it in a fixed state on the bottom right side and we'll make updates if needed in the future.

@tulup-conner is the one to review the PR in terms of technical review, however, I would appreciate if the ad would re-render and generate a new impression as you navigate throughout the pages. Even if the original duplicate ad is only a "dev" problem.

Cheers,
Zoltan

[sayzlim]

@zoltanszogyenyi I can confirm in the built version that the ad re-render whenever the page page changes. Check out the recorded video of the local built page. This will ensure all the possible impressions are recorded by our ad server.

[zoltanszogyenyi]

@sayzlim gotcha - if the checklist above is fixed after build and @tulup-conner approves the review then it's good to go!

[tulup-conner]

Hey @sayzlim thank you for adding this! I made the following changes:

1. Disable Carbon Ads in development mode; it doesn't help to track users running the dev server in the first place, and also causes the ads to duplicate, which makes development more challenging
2. Converted next/router useRouter() to usePathname() as required by Next.js 13
3. Created a custom Window wrapper in TypeScript that includes the magic _carbonads handle so Next.js builds succeed

It's a bit unfortunate that the Carbon JavaScript doesn't work in the intuitive React way - what I would like to do is just insert the <script> as JSX inside #carbon-container, but it doesn't seem to work without the traditional DOM manipulation you have provided. That isn't important at all, though, so, oh well!

I can confirm that ads don't show up in dev mode, and they do not repeat/stack in production! I think this is ready to go so I will merge now, which means we will start displaying ads effectively immediately on flowbite-react.com.

[tulup-conner]

Also, you didn't create a feature branch in this PR, so this is going to be implemented in a separate Pull Request #876