how to load optional customer id gtag/pixel and etc...

[reslear]

📚 What are you trying to do?

I can't figure out how to load the optional id correctly
simple product page to load a consumer id in addition to the main one.

my not working example:

// /product/[id].vue

const consumerGtagId = computed(() => pageData?.gtag)

const {
  gtag,
  proxy: proxyGtag,
  load: loadGtag,
} = useScriptGoogleAnalytics({
  id: '', // without - type error 
  l: 'customer',
  key: 'gtag-customer',
  scriptOptions: {
    // consent ? 
    trigger: 'manual',
  },
})

if (consumerGtagId.value) {
  proxyGtag.gtag('config', consumerGtagId.value as any) // any - because type only `reset` 
  loadGtag()
}

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[harlan-zw]

cc: @huang-julien, @flashdesignory some more gtag issues here if you have any ideas

[reslear]

hi @huang-julien @flashdesignory Can you help?

[huang-julien]

Hey 👋 we use TPC to generate the composable and it comes with the config event already set in the inline script property.
Currently we're only using id from the options to do it so you can't load an optional id for now.

There's currently a PR with a new templating system in TPC. We can probably try open a PR to make window['gtag-'+(options?.l ?? "dataLayer")]('config',(options?.id )) optional.

cc @flashdesignory

[reslear]

@huang-julien thanks for the answer!

Yes! That would be great, as some services need the ability to track the statistics of customers/sellers on their pages