Replies: 10 comments 4 replies
-
Microsoft UETVendor 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)
}
}) |
Beta Was this translation helpful? Give feedback.
-
TikTok PixelVendor 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 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"))
}
}) |
Beta Was this translation helpful? Give feedback.
-
Google reCAPTCHADocs: 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()
}
}) |
Beta Was this translation helpful? Give feedback.
-
Posthog#206 (5 upvotes) |
Beta Was this translation helpful? Give feedback.
-
Rewardful(Affiliate marketing with Stripe) Needs to be global on all pages:
|
Beta Was this translation helpful? Give feedback.
-
Tawk.to
|
Beta Was this translation helpful? Give feedback.
-
Snapchat pixel
|
Beta Was this translation helpful? Give feedback.
-
Square payments SDK https://developer.squareup.com/reference/sdks/web/payments |
Beta Was this translation helpful? Give feedback.
-
Monaco EditorThis is my awful attempt into loading a Monaco Editor via Am I doing this right? It looks bad but this was my first attempt. |
Beta Was this translation helpful? Give feedback.
-
UsercentrictsA consent manager third party: https://docs.usercentrics.com/#/browser-ui?id=implementation |
Beta Was this translation helpful? Give feedback.
-
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:For example, the Google Analytics registry script will validate the tag
id
, expose thegtag
interface and allow you to accessdataLayer
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:
useScript
usage - We encourage users to provide auseScript
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:
We prefer module authors to integrate with Nuxt Scripts to provide better integrations, a good example is the Nuxt Turnstile module.
Beta Was this translation helpful? Give feedback.
All reactions