Add AppAdSwap to an Astro site

By Luis Krin · Updated · All install guides

The snippet

Every platform needs the same two things: a slot where the card shows, and the script. Replace SITE_ID with your site's ID. The Sites page in your dashboard shows this snippet with the ID already filled in.

HTML
<div data-appadswap="SITE_ID" data-format="card"></div>
<script src="https://appadswap.com/w.js" async></script>

In Astro, add the script to your layout with the is:inline directive, and put the slot, a plain div, in any page or component. Without is:inline, Astro treats the script as its own code and tries to process it.

Why is:inline

Astro builds, bundles and optimises the <script> tags it finds in your components. Its documentation says Astro won't process a script that has an attribute other than src, and that is:inline is how you opt a script out of processing, as you want for a script loaded from a remote server. AppAdSwap's script lives at appadswap.com, so it's the remote-script case.

Step 1: add the script to your layout

Open the layout your pages share, usually src/layouts/Layout.astro, and add the tag just before the closing </body>:

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My site</title>
  </head>
  <body>
    <slot />
    <script is:inline src="https://appadswap.com/w.js" async></script>
  </body>
</html>

Every page that uses the layout now has the script. If you have several layouts, add the tag to each, or to the one component they all include.

Step 2: add the slot

Put the slot wherever the card should appear: in a page, a component or an .mdx file. In an .astro file it's just HTML:

<aside>
  <div data-appadswap="SITE_ID" data-format="card"></div>
</aside>

To put the card at the end of every blog post, add the slot to your blog post layout, below <slot />.

Pages that load without a full reload

If you use Astro's view transitions, navigation between pages replaces the page content without a full reload. The widget watches the page for new slots and fills those that are added after it loaded, so a slot on a page you navigate to should still fill. Check one yourself after a navigation, since that depends on how the transitions are set up in your project.

Check it works

Run the site and open a page with a slot. The Sites page in your dashboard flips from unverified to live on its own once the widget has loaded on the address you registered; during development that's localhost, so the real check is the deployed site.

If it doesn't work

  • There's no request for w.js. The script tag isn't in the layout that page uses, or it's missing is:inline and Astro has handled it as something else. Look at the built HTML in dist/ to see whether the tag made it through.
  • The tag is in a component that isn't rendered on that page. Move it to the shared layout.
  • A strict content security policy blocks it. Allow https://appadswap.com for scripts and connections.

Source

Astro's guide to scripts and event handling. Next: other install guides, or add your app.

Other platforms.

Installed?Add your app.

Add your appAll install guides