How to add adsense to Sveltekit?

Why use Ads?

Adsense is a great option to earn some money for your content.

I do not usually support ads but, it is a huge ecosystem and helps creators make a living off of their hard work put in to create content.

When ads are not intrusive they are fine. I prefer not to use popups on my site.

Popups distract your users. If you really want to use one then do it only with users’ consent. Something like a button that opens a popup.

Ads in a popup are the worst thing that can happen to a user. Never do this in your apps, websites.

Load ads in a place where the user expects them. Make a clear demarcation between the content and an ad.

Top-level script vs script inside HTML

A top-level script tag inside the Sveltekit component has special purposes.

But a script tag inside an HTML tag is treated as a normal script tag. However, if your script depends on the window object then you will have to handle it in some way.

This is why you can use the Google ads script inside a <div> or a <p> tag.

GoogleAds.svelte

<p>
  <script
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4146856286076977"
    crossorigin="anonymous"
  ></script>
  <!-- webjeda-top-banner-ad -->
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-4146856286076977"
    data-ad-slot="1742538494"
    data-ad-format="horizontal"
    data-full-width-responsive="true"
  />
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</p>

Issues with adblock

Adblock blocks the ad script(hence the component) from loading. This breaks the entire app.

The solution is to load the Google Ads svelte component dynamically after the app is mounted.

Dynamic import of Sveltekit components

Use the below snippet to load your svelte component load dynamically onMount. This is done because I wanted this not to be prerendered.

If it is prerendered and due to an adblock it isn’t able to load, then the entire app fails.

In __layout.svelte

<script>
  import { onMount } from "svelte";

  let Ads;
  onMount(async () => {
    Ads = (await import("$components/GoogleAds.svelte")).default;
  });
</script>

<svelte:component this="{Ads}" />