Skip to main content

Installing the Wrapper Tag

Paste the wrapper tag into the <head> of your site. Place it as high as possible so the library and config can load in parallel with the rest of the page.

Where to install​

The tag is a single inline <script> block. Put it in <head>, before other ad-related scripts:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Site</title>

  <!-- Anima wrapper — paste the tag you copied from Setup → Wrapper here -->
  <script>
    /* inline loader from the portal */
  </script>

  <!-- Other scripts below -->
</head>
Why placement matters

The inline loader fires the library-load and config-fetch requests as early as possible. Placing it early in <head> means the library and config can arrive before the first ad slot element is rendered.

Installation by platform​

WordPress​

Theme editor

  1. Appearance → Theme Editor
  2. Open header.php
  3. Paste the tag immediately after <head>
  4. Save

Header-scripts plugin (recommended)

  1. Install any "insert headers and footers" plugin
  2. Paste the tag into the plugin's "Header" / "scripts in head" field
  3. Save

Theme functions

// functions.php
function add_anima_wrapper() {
    // Paste the entire <script>…</script> block here, verbatim.
    ?>
    <script>/* inline loader from the portal */</script>
    <?php
}
add_action('wp_head', 'add_anima_wrapper', 1);

Webflow​

  1. Project Settings → Custom Code
  2. Paste the tag into Head Code
  3. Save and publish

Squarespace​

  1. Settings → Advanced → Code Injection
  2. Paste the tag into Header
  3. Save

Shopify​

  1. Online Store → Themes → Actions → Edit Code
  2. Open theme.liquid
  3. Paste the tag immediately after <head>
  4. Save

Next.js (App Router)​

The wrapper tag is inline JS that must execute on every page render. Put it in the root layout.tsx:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <Script id="anima-wrapper" strategy="beforeInteractive">
          {`/* inline loader from the portal, without surrounding <script> tags */`}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Strip the outer <script> / </script> from the tag you copy — Next's <Script> wraps its contents in its own tag.

Gatsby​

// gatsby-ssr.js
import React from 'react';

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="anima-wrapper"
      dangerouslySetInnerHTML={{
        __html: `/* inline loader from the portal, without surrounding <script> tags */`,
      }}
    />,
  ]);
};

Static HTML​

Paste the tag into every page template's <head>, or into whatever include or partial is shared across pages.

Installation checklist​

Before deploying:

  • Tag is in <head>, not <body>
  • Tag is near the top of <head>, before other ad-related scripts
  • Tag was copied verbatim — the domain_id and npm org values inside it came from the portal, not hand-typed
  • Your site serves over HTTPS (the loader fetches over HTTPS; mixed-content pages will fail)

Deploying​

After pasting the tag:

PlatformDeploy
WordPressSave the file / plugin; clear any full-page cache
WebflowPublish
SquarespaceSave (auto-publishes)
Static / JamstackDeploy to your host
CustomYour CI/CD
Clear caches after deploy

CDN and full-page caches will keep serving old HTML until invalidated. Purge your edge cache after deploying the tag.

Testing before production​

Two options:

Staging. If you have a staging copy of your site, install the tag there first and confirm it loads (see Verifying installation). The same tag works on staging and production unless you've been given separate domain IDs.

Preview with debug mode. On any page with the tag installed, append ?pbjs_debug=true to the URL. The wrapper logs an AAM badge in Console and you can inspect window.Wrapp, window.__wrapp_loader, and window.wrapperTag. See Wrapper Debugging for the full signal list.

Next​

Verify installation →

Troubleshooting​

Tag isn't in the rendered HTML​

CauseFix
Full-page cache still serving old HTMLPurge CDN / full-page cache
Deployment not completeConfirm the deploy ran
Wrong templatePaste into a template included on every page

JavaScript errors in Console​

SymptomFix
Failed to load resource on the jsDelivr URLConfirm your domain ID in the tag matches what's in the portal
Mixed content warningsServe your site over HTTPS
Errors unrelated to the wrapperUsually a conflicting analytics or consent script — check the stack trace

Common questions​

Do I need the tag on every page?

Yes. The tag has to be in <head> of any page where ads should serve. Put it in the shared template / partial / layout.

Will it slow down my site?

The inline loader is tiny (~1.5 KB) and kicks off the library load and config fetch in parallel, both at low priority (priority: 'low') to avoid contending with LCP-critical resources. In practice the impact on first paint is negligible. See Revenue vs. latency for how to measure the tradeoffs.

Can I install on a subdomain?

Each subdomain needs its own domain record in Anima. If the subdomain isn't listed in your Account sidebar's account selector, ask your account manager to add it.