Request a new registry script

[harlan-zw]

Background

Nuxt Scripts aims to make using third-party scripts as easy as possible, part of that is providing a registry of first-party - third-party scripts.

These registry scripts provide some improvements on top of just using useScript, such as:

• Validation on input
• Built-in type safety
• Fine-tuned performance with aggressive tree-shaking
• Appropriate privacy tags applied
• Appropriate SSR stubbing

For example, the Google Analytics registry script will validate the tag id, expose the gtag interface and allow you to access dataLayer server-side.

Requesting a registry script

As each new script added is extra maintenance for the project, only the top requested scripts will be added as official registry scripts. Others can be added to the docs as copy+pastable snippets.

If you'd like to request a script please do!

Submit what you'd like to see in this discussion, please include:

1. Vendor Name
2. Code sample
3. Documentation
4. useScript usage - We encourage users to provide a useScript equivalent if they've managed to get it working to unblock other users who may be using the same third-party scripts.

Contributing a registry script

If you're interested in contributing a registry script, it's important to know the constraints the module applies:

• No built-time dependencies, all script functionality must be loaded from a third-party source.
• We don't add any features on top of existing third-party scripts, all interfaces should be a best effort of matching.
• Default best performance and most aggressive privacy by default.

We prefer module authors to integrate with Nuxt Scripts to provide better integrations, a good example is the Nuxt Turnstile module.

[joachimhviid]

Microsoft UET

Vendor provided script:

<script> 
(function(w,d,t,r,u) {var f,n,i;w[u]=w[u]||[] ,f=function(){var o={ti:"TAG_ID_HERE", enableAutoSpaTracking: true}; o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")} ,n=d.createElement(t),n.src=r,n.async=1,n.onload=n .onreadystatechange=function() {var s=this.readyState;s &&s!=="loaded"&& s!=="complete"||(f(),n.onload=n. onreadystatechange=null)},i= d.getElementsByTagName(t)[0],i. parentNode.insertBefore(n,i)})(window,document,"script"," //bat.bing.com/bat.js","uetq"); 
</script> 

Documentation can be found here: https://help.ads.microsoft.com/#apex/ads/en/56686/2

I managed to get it working using the $script object directly with the following:

const { $script } = useScript(
  {
    src: 'https://bat.bing.com/bat.js',
    crossorigin: false,
  },
  {
    use() {
      return { uetq: window.uetq }
    },
  },
)

watch($script.status, (status) => {
  if (status === 'loaded') {
    const options = { ti: 'TAG_ID_HERE', enableAutoSpaTracking: true }
    // @ts-expect-error untyped
    options.q = window.uetq
    // @ts-expect-error untyped
    window.uetq = new UET(options)
  }
})

[joachimhviid]

TikTok Pixel

Vendor provided script:

!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie", "holdConsent", "revokeConsent", "grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
  ttq.load('YOUR_ID_HERE');
}(window, document, 'ttq');

Documentation here: https://ads.tiktok.com/help/article/get-started-pixel?lang=en

Similarly to the UET script, I only managed to get this working through the $script object. I used the useRegistryScript composable for my implementation:

const { $script } = useRegistryScript<TiktokPixelApi>('tiktok', () => ({
  scriptInput: {
    src: withQuery('https://analytics.tiktok.com/i18n/pixel/events.js', {
      sdkid: "YOUR_ID_HERE",
      lib: 'ttq',
    }),
    crossorigin: false,
  },
  scriptOptions: {
    use() {
      return { ttq: window.ttq }
    },
  },
  clientInit: import.meta.server
    ? undefined
    : () => {
        // @ts-expect-error untyped
        window.TiktokAnalyticsObject = 'ttq'
        const ttq: TiktokPixelApi['ttq'] = (window.ttq = window.ttq || [])

        ttq.methods = [
          'page',
          'track',
          'identify',
          'instances',
          'debug',
          'on',
          'off',
          'once',
          'ready',
          'alias',
          'group',
          'enableCookie',
          'disableCookie',
          'holdConsent',
          'revokeConsent',
          'grantConsent',
        ]

        ttq.setAndDefer = function (obj, method) {
          // @ts-expect-error untyped
          obj[method] = function () {
            // @ts-expect-error untyped
            // eslint-disable-next-line prefer-rest-params
            obj.push([method].concat(Array.prototype.slice.call(arguments)))
          }
        }

        ttq.methods.forEach((method) => ttq.setAndDefer(ttq, method))

        ttq.instance = function (name) {
          // @ts-expect-error untyped
          const instance = ttq._i[name] || []
          ttq.methods.forEach((method) => ttq.setAndDefer(instance, method))
          return instance
        }

        ttq.load = function (sdkId, options) {
          // @ts-expect-error untyped
          ttq._i = ttq._i || {}
          // @ts-expect-error untyped
          ttq._i[sdkId] = []
          // @ts-expect-error untyped
          ttq._i[sdkId]._u = 'https://analytics.tiktok.com/i18n/pixel/events.js'
          // @ts-expect-error untyped
          ttq._t = ttq._t || {}
          // @ts-expect-error untyped
          ttq._t[sdkId] = +new Date()
          // @ts-expect-error untyped
          ttq._o = ttq._o || {}
          // @ts-expect-error untyped
          ttq._o[sdkId] = options || {}
        }
      },
}))

watch($script.status, (status) => {
  if (status === 'loaded') {
    $script.then(({ ttq }) => ttq.holdConsent())
    $script.then(({ ttq }) => ttq.load("YOUR_ID_HERE"))
  }
})

[WuChenDi]

What is the type of TiktokPixelApi, and where does it come from?

[joachimhviid]

@WuChenDi I tried to find a link to the documentation of the functions, but I was unable to find it. TiktokPixelApi is something I had made when I initially made the implementation and the type looks like this:

type TtqFns = {
  track: (eventName: string, parameters: Record<string, unknown>) => void
  holdConsent: () => void
  grantConsent: () => void
  revokeConsent: () => void
  enableCookie: () => void
  disableCookie: () => void
}

export interface TiktokPixelApi {
  ttq: TtqFns & {
    methods: string[]
    setAndDefer: (instance: TiktokPixelApi['ttq'], method: string) => void
    instance: (name: string) => TiktokPixelApi['ttq']
    load: (sdkid: string, options?: any) => void
  }
}

There are probably more functions available, but these are the ones that I needed at the time.

[WuChenDi]

@joachimhviid Thank you for your contribution!

It seems they haven't provided type files, and I couldn't find any related information either.

[MarioC3]

Google reCAPTCHA

Docs: https://developers.google.com/recaptcha/intro

Example Script:

<script>
(function(){var w=window,C='___grecaptcha_cfg',cfg=w[C]=w[C]||{},N='grecaptcha';var gr=w[N]=w[N]||{};gr.ready=gr.ready||function(f){(cfg['fns']=cfg['fns']||[]).push(f);};w['__recaptcha_api']='https://www.google.com/recaptcha/api2/';(cfg['render']=cfg['render']||[]).push('explicit');(cfg['onload']=cfg['onload']||[]).push('onloadCallback');w['__google_recaptcha_client']=true;var d=document,po=d.createElement('script');po.type='text/javascript';po.async=true; po.charset='utf-8';var v=w.navigator,m=d.createElement('meta');m.httpEquiv='origin-trial';m.content='Az520Inasey3TAyqLyojQa8MnmCALSEU29yQFW8dePZ7xQTvSt73pHazLFTK5f7SyLUJSo2uKLesEtEa9aUYcgMAAACPeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IkRpc2FibGVUaGlyZFBhcnR5U3RvcmFnZVBhcnRpdGlvbmluZyIsImV4cGlyeSI6MTcyNTQwNzk5OSwiaXNTdWJkb21haW4iOnRydWUsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=';if(v&&v.cookieDeprecationLabel){v.cookieDeprecationLabel.getValue().then(function(l){if(l!=='treatment_1.1'&&l!=='treatment_1.2'&&l!=='control_1.1'){d.head.prepend(m);}});}else{d.head.prepend(m);}po.src='https://www.gstatic.com/recaptcha/releases/rKbTvxTxwcw5VqzrtN-ICwWt/recaptcha__en.js';po.crossOrigin='anonymous';po.integrity='sha384-1qCnjZ4tqdtwUnG8/biz1OfJ7vkM3jnPZ0W0wIcDu+NDwZyQHqHpscJVB8ezdlTM';var e=d.querySelector('script[nonce]'),n=e&&(e['nonce']||e.getAttribute('nonce'));if(n){po.setAttribute('nonce',n);}var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();
</script>

I got the Recaptcha v2 working by explicitly rendering the reCaptcha checkbox, so it's a little manual process.

<template>
	<div id="recaptchaEl"></div>
</template>

const { $script } = useScript<typeof grecaptcha>(
	{
		src: `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`,
		async: true,
		defer: true,
		crossorigin: undefined,
	},
	{
		use() {
			return window.grecaptcha
		},
		trigger: 'manual',
	}
)

onMounted(() => {
	window.onloadCallback = () => {
		window.grecaptcha.render('recaptchaEl', {
			sitekey: '{yourkey}',
			hl: 'en'
			callback: () => {}
			},
		})
	}

	if (window.grecaptcha) {
		window.onloadCallback()
	}

	if (!window.grecaptcha) {
		$script.load()
	}
})

[gygoo]

reCAPTCHA v3 would also be very useful :)

[harlan-zw]

Posthog

#206 (5 upvotes)

[stefanobartoletti]

About PostHog you may want to have a look at the suggested integration with Nuxt

https://posthog.com/docs/libraries/nuxt-js

especially concerning disabling autocapture and manually set page capture on route change.

[felixranesberger]

Would love to have Posthog integrated 🙌

[AdamBD]

Rewardful

(Affiliate marketing with Stripe)

Needs to be global on all pages:

<script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
<script async src='https://r.wdfl.co/rw.js' data-rewardful='{key}'></script>

[harlan-zw]

Is there any technical documentation you can link?

[ryanweston]

https://developers.rewardful.com/javascript-api/overview

[amcolex]

Tawk.to

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/{TAWKTO_ID}/{TAWKTO_WIDGET}';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

[niklasfjeldberg]

Snapchat pixel

Docs

<!-- Snap Pixel Code -->
<script type='text/javascript'>
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', 'PIXEL_ID', {
'user_email': '__INSERT_USER_EMAIL__'
});

snaptr('track', 'PAGE_VIEW');

</script>
<!-- End Snap Pixel Code -->

[N-M]

Square payments SDK https://developer.squareup.com/reference/sdks/web/payments

https://web.squarecdn.com/v1/square.js

[sandros94]

Monaco Editor

This is my awful attempt into loading a Monaco Editor via useScriptNpm, while setting up a worker, add custom language (I had to use Nuxt MDC ofc 😏) and various options.

Am I doing this right? It looks bad but this was my first attempt.

[joaopedrodcf]

Usercentricts

A consent manager third party: https://docs.usercentrics.com/#/browser-ui?id=implementation

  useScript(
        {
            src: "https://app.usercentrics.eu/browser-ui/latest/loader.js",
            id: "usercentrics-cmp",
            "data-settings-id": "XXXXXXXX", // Change the id
            async: true, // async is already default just making it explicit
            defer: false, // their docs doesn't use defer just following the example
        },
        {
            devtools: {
                registryKey: "UserCentrics",
                registryMeta: {
                    name: "UserCentrics",
                },
            },
            trigger: "onNuxtReady",
            warmupStrategy: "preconnect",
        },
    );

[toniengelhardt]

ahrefs Web Analytics

"With a free account, you can add as many sites as you want and track up to 1 million page views per month per site. For websites with higher volumes, you’ll have the option to upgrade."

https://help.ahrefs.com/en/articles/10247870-about-ahrefs-web-analytics

[shintaii]

Calendly

Docs

useScript({
   url: 'https://calendly.com/YOURLINK',
   parentElement: document.getElementById('SAMPLEdivID'),
   prefill: {},
   resize: bool
   utm: {}
}

[agracia-foticos]

Awin? any solution?

[agracia-foticos]

https://developer.awin.com/v1/docs/advertiser-mastertag