Analytics & Scripts
Inject merchant-configured analytics and custom head/body scripts, consent-gated
Merchants configure analytics and custom scripts in the Behio admin
(E-shop → SEO a scripty): Google Analytics 4, Google Tag Manager, Meta
Pixel, Google site verification, or arbitrary RAW HTML placed in the document
head, at the start of body, or at the end of body. The SDK delivers them
to the storefront and injects them for you, gating analytics entries behind the
visitor's cookie consent.
StorefrontScripts
Mount it once in your root layout, inside BehioProvider. Because the
layout is usually a server component, wrap it in a tiny "use client" file
(the same pattern as a consent banner).
// components/StorefrontScripts.tsx
"use client";
import { StorefrontScripts as Base } from "@behio/storefront-sdk/react";
export function StorefrontScripts() {
return <Base />;
}// app/layout.tsx
import { StorefrontScripts } from "@/components/StorefrontScripts";
// ...inside <BehioProvider> ...
<StorefrontScripts />Entries flagged consentRequired (the default for analytics) are injected only
after the visitor grants analytics cookie consent; non-analytics entries are
injected on mount. The visitor id is read from the behio_visitor_id
localStorage key (the same one the consent banner uses), or you can pass it
explicitly:
<StorefrontScripts visitorId={visitorId} />Typed entries (GA4, GTM, Meta Pixel, verification) are expanded into their
canonical snippet and placed where each vendor expects; RAW entries are
injected verbatim at the chosen placement.
useShopScripts
For custom rendering, fetch the raw list yourself:
import { useShopScripts } from "@behio/storefront-sdk/react";
const { data } = useShopScripts();
// data?.scripts: { id, type, placement, value, consentRequired }[]Or imperatively on the client instance:
const { data } = await behio.getShopScripts();type is "GA4" | "GTM" | "META_PIXEL" | "GOOGLE_VERIFICATION" | "RAW",
placement is "HEAD" | "BODY_START" | "BODY_END". Only enabled entries are
returned.
Search Console & Bing verification
Site verification needs no code changes. The merchant adds a
GOOGLE_VERIFICATION script in the Behio admin (E-shop → SEO a scripty)
with the content value from Google Search Console's HTML-tag method;
<StorefrontScripts /> renders the meta tag into <head> (verification
entries are never consent-gated). After verifying, submit
https://yourdomain.tld/sitemap.xml in Search Console. The template's
sitemap carries real per-record lastmod from product/page updatedAt.
Also register the shop in Bing Webmaster Tools: the Bing index feeds AI
search (ChatGPT search, Microsoft Copilot). Use its one-click Import from
Google Search Console, or add the msvalidate.01 meta tag as a RAW script
with HEAD placement.
Homepage SEO
The same admin screen sets the per-language homepage SEO. Feed it into your
homepage metadata so it reaches the page <head>:
export async function generateMetadata() {
const { data: seo } = await behio.getShopSeo(); // optional locale arg
return {
title: seo?.title ?? shop.name,
description: seo?.description ?? undefined,
keywords: seo?.keywords ?? undefined,
openGraph: {
title: seo?.ogTitle ?? seo?.title ?? shop.name,
description: seo?.ogDescription ?? seo?.description ?? undefined,
images: seo?.ogImage ? [{ url: seo.ogImage }] : undefined,
},
};
}