💡 Solução Detalhada - Get Browser Language on Analytics

📝 Implementação

Adicionar detecção de idioma do navegador nos eventos analytics:

// analytics/utils/language.ts (novo arquivo)
export function getBrowserLanguage(): string {
  if (typeof navigator === "undefined") return "en-US";
  
  return navigator.language || 
         navigator.languages?.[0] || 
         "en-US";
}

export function getBrowserLanguages(): string[] {
  if (typeof navigator === "undefined") return ["en-US"];
  
  return navigator.languages 
    ? Array.from(navigator.languages) 
    : [navigator.language || "en-US"];
}

🔧 Integração com Analytics

Atualizar o componente Analytics para incluir idioma:

// website/components/Analytics.tsx
const snippet = () => {
  const browserLang = globalThis.navigator?.language || "en-US";
  const browserLangs = globalThis.navigator?.languages 
    ? Array.from(globalThis.navigator.languages) 
    : [browserLang];
  
  globalThis.window.DECO.events.subscribe((event) => {
    globalThis.window.dataLayer = globalThis.window.dataLayer || [];
    
    if (!event || !globalThis.window.dataLayer) return;
    
    // Adicionar informações de idioma a todos os eventos
    const enrichedEvent = {
      ...event,
      user: {
        ...(event.user || {}),
        language: browserLang,
        languages: browserLangs,
      },
    };
    
    if (event.name === "deco") {
      globalThis.window.dataLayer.push({
        event: event.name,
        deco: enrichedEvent.params,
        user_language: browserLang,
        user_languages: browserLangs,
      });
      return;
    }
    
    globalThis.window.dataLayer.push({ ecommerce: null });
    globalThis.window.dataLayer.push({
      event: event.name,
      ecommerce: enrichedEvent.params,
      user_language: browserLang,
      user_languages: browserLangs,
    });
  });
};

📊 Para GA4

Configurar custom dimension no Google Analytics 4:

// website/components/Analytics.tsx - na função GTAG
export function GTAG({ trackingId }: Pick<TagManagerProps, "trackingId">) {
  return (
    <Head>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());

// Configurar com idioma do usuário
gtag("config", "${trackingId}", {
  user_language: navigator.language || "en-US",
  user_languages: navigator.languages ? Array.from(navigator.languages).join(",") : (navigator.language || "en-US"),
});

// Set custom dimension para todas as páginas
gtag("set", "user_properties", {
  preferred_language: navigator.language || "en-US"
});
          `,
        }}
      />
    </Head>
  );
}

�� Para GTM

Push inicial com idioma:

export function GoogleTagManager(props: TagManagerProps) {
  // ... código existente ...
  
  return (
    <>
      <Head>
        <script
          id={`gtm-init-${id}`}
          dangerouslySetInnerHTML={{
            __html: `
// Set language info before GTM loads
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  user_language: navigator.language || "en-US",
  user_languages: navigator.languages ? Array.from(navigator.languages) : [navigator.language || "en-US"]
});

// Then load GTM
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({"gtm.start":
new Date().getTime(),event:"gtm.js"});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s);j.async=true;j.src=i;f.parentNode.insertBefore(j,f);
})(window,document,"script","dataLayer", "${src.href}");
            `,
          }}
        />
      </Head>
      {/* ... resto do código ... */}
    </>
  );
}

✅ Checklist

Adicionar detecção de idioma ao snippet analytics
Incluir user_language em todos os eventos
Configurar custom dimension no GA4
Testar com diferentes idiomas do navegador
Documentar como acessar dados de idioma nos relatórios
Verificar que funciona com GTM e GA4

Get Browser Language on Analyticts #1053

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions