Google 跟踪代码管理器未出现在页面源中

问题描述 投票：0回答：1

我正在使用 Astro 框架来构建静态页面。我有一项任务是在打开的 head 标签下添加一个 google 标签，并在打开 body 标签后立即添加第二个，我已经完成了（可以在下面的代码片段中看到）：

---
import Footer from "../components/SharedComponents/Footer.astro";
import Hero, { TypeOfHeroContent } from "../components/SharedComponents/Hero.astro";
import Navbar from "../components/SharedComponents/Navbar.astro";
import { networksAndHero } from "../components/SharedComponents/NetworksAndHeroPreload.astro";

export interface Props {
  title?: string;
  description?: string;
  keywords?: string;
  heroContentType?: TypeOfHeroContent;
  navbarColor?: string;
  pageName?: string;
}

const { title, description, keywords, heroContentType, navbarColor, pageName } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google Tag Manager -->
    <script>
      (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),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "dataLayer", "GTM-PCP4MNJ");
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link rel="preload" href="/fonts/Inter.var.woff2" as="font" type="font/woff2" crossorigin />
    {
      networksAndHero.map((images) => (
        <link rel="preload" as="image" href={images.img} type="image/webp" />
      ))
    }
    <meta
      name="robots"
      content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
    />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <meta name="keywords" content={keywords} />
    <title>{title}</title>
    <style>
      img {
        aspect-ratio: attr(width) / attr(height);
        height: auto;
        max-width: 100%;
      }
      @font-face {
        font-family: "inter";
        src: url("/fonts/Inter.var.woff2") format("woff2");
        font-display: block;
      }
    </style>
  </head>

  <body class="bg-fieldblack font-sans">
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-PCP4MNJ"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      >
      </iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <Navbar navbarColor={navbarColor} />
    {heroContentType && <Hero heroContentType={heroContentType} />}
    <slot />
    <Footer pageName={pageName} />
  </body>
</html>

虽然由于某种原因，我应该位于 head 部分顶部的 Google 标签实际上没有显示在 Inspect Element 或 Page Source 中，但只有 script 标签周围的注释，同时 body 部分顶部的 noscript 标签似乎完全没问题。有没有人遇到过同样的事情并知道如何解决它？

html google-tag-manager astro astrojs
1个回答
0
投票

您应该使用 

is:inline
指令，这样 Astro 就不会处理并尝试优化下载 Google 跟踪代码管理器的代码。您可以在 Astro 文档中阅读有关指令的更多信息 - https://docs.astro.build/en/reference/directives-reference/#script--style-directives

示例：

<script is:inline>
              (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),
                  dl = l != "dataLayer" ? "&l=" + l : "";
                j.async = true;
                j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
                f.parentNode.insertBefore(j, f);
              })(window, document, "script", "dataLayer", "GTM-PCP4MNJ");
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.