个人网站开发记录-引流公众号 & 谷歌分析 & 谷歌广告 & GTM

ObjectX前端实验室2025-02-23 12:01

前言

原本没有打算做这几个，但是有人私信我，问我后续会不会支持这些，不是很喜欢谷歌广告和引流弹窗，影响网站的风格设计，所以我做成了支持配置打开关闭的，一般情况下我是不会开的，目前谷歌广告接入仍然存在问题，大概是网站被判定为开发状态，所以等后面开发完整有内容再重新接入吧，具体流程和实现是通的了。

效果

引流公众号

这个是有一个免费引流的开源产品的，我在代码随想录上看到过，但是他的样式跟我现在的设计冲突，并且没法做验证结果的获取，所以我仿照着自己写了个

做的是整站文章的验证，开关控制是否开启，和验证码的时效性，也可以看到具体验证码的验证信息

谷歌分析

接入谷歌分析后可以统计用户访问的页面，最喜欢的页面，用户访问量等等信息，还是挺不错的 通过GTM可以直接选择创建代码，里面支持谷歌分析的代码，需要先在谷歌分析创建，然后获取id，再通过GTM导入，GTM管理这样支持扩展，避免经常改动代码

Google AdSense谷歌广告

需要在平台上去给网站申请，配置代码片段，这里我配置成了可选的，因为你不太喜欢一堆广告，影响ui观感，审核的时候需要将开关打开，因为需要验证网站所属权，一般审核一两天，我的刚提交，审核还没通过

GTM跟踪代码管理器

这个主要是用来管理片段的插入，很多种代码片段和自定义片段的管理，这样避免后续频繁的更改代码，进需要在平台配置即可

平台介绍和使用

Google Analytics

Google Analytics（简称 GA）是 Google 提供的一款用于网站流量分析的工具，它可以帮助网站管理员、营销人员和开发人员理解网站的流量来源、用户行为、转化情况等关键指标。Google Analytics 可以为网站提供详细的统计信息，帮助团队优化网站性能和用户体验。

主要功能

  1. 流量分析：查看网站的访问量，包括访问者数量、页面浏览量、访客来源（例如直接访问、搜索引擎、社交媒体等）。
  2. 用户行为分析：分析用户在网站上的行为，例如他们浏览了哪些页面、停留了多长时间、跳出率等。
  3. 受众分析：了解访问你网站的用户特征，包括年龄、性别、地理位置、设备类型等。
  4. 转化跟踪：追踪用户在网站上进行的关键操作，如填写表单、购买产品、下载文件等。
  5. 实时分析：可以实时查看网站的当前流量，包括访问者的实时位置和正在访问的页面。
  6. 目标和事件跟踪：设置和跟踪特定的"目标"（如转化、注册等）和"事件"（如点击按钮、播放视频等）。
  7. 电子商务分析：如果你运营的是电商网站，Google Analytics 可以追踪销售情况、产品表现、购物车放弃率等。
  8. 多渠道报告：集成Google Ads等广告服务，帮助分析广告效果，衡量广告投入回报（ROI）。
  9. 用户细分：通过细分用户群体来深入分析不同类型用户的行为差异，帮助制定个性化营销策略。

版本

  • Google Analytics 4（GA4） ：是Google Analytics的最新版本，具有更强的跨平台支持（网站、应用等），支持机器学习功能，优化了数据隐私和合规性管理。
  • Universal Analytics：是旧版的Google Analytics，虽然仍然被广泛使用，但Google正在逐步鼓励用户过渡到GA4。

配置

用谷歌账号登录之后找到数据流，选择增加数据流

然后选择设置代码片段，加入到head中，我的项目我已经搞定了，后续只需要在后台管理设置id就行，平台支持测试代码片段是否配置成功

配置完成后首页就可以查看各种浏览，点击，滚动记录，用户数据等

Google AdSense谷歌广告

Google AdSense 是 Google 提供的一种广告发布服务，允许网站管理员通过在自己的网站或博客上展示广告来赚取收入。AdSense 通过将相关的广告与网站内容匹配，实现广告主和网站发布者的双赢。它是 Google 的广告收入共享平台，广告的显示和收入的计算是基于点击或展示来实现的。

主要功能

  1. 广告格式多样：AdSense 提供多种广告格式，包括文本广告、图片广告、视频广告、响应式广告等。广告可以根据设备、浏览器、屏幕尺寸等进行优化。

  2. 自动化广告匹配：Google 会根据网站内容和用户的兴趣，自动选择和展示与内容相关的广告。这种自动匹配的机制确保了广告的相关性和点击率。

  3. 收入模式：

    • 按点击付费（CPC） ：每当用户点击广告时，网站管理员就会赚取一定金额。
    • 按展示付费（CPM） ：广告主根据广告的展示次数付费，网站管理员根据广告的曝光量来获取收入。

  4. 广告优化：AdSense 提供广告优化工具，帮助网站管理员调整广告的布局、格式和类型，以提高广告效果和收入。例如，可以设置广告的显示位置和大小，甚至选择哪些广告类型最适合你的观众群体。

  5. 实时统计：提供实时的收入和表现报告，用户可以查看每个广告的点击率、展示次数、收入等指标，帮助优化广告表现。

  6. 多平台支持：AdSense 不仅支持网站，还支持移动应用和视频平台（如 YouTube），扩展了收入的来源。

  7. 广告定向：AdSense 可以根据访问者的兴趣、位置、设备等因素展示个性化的广告。广告的定向功能帮助提高广告的相关性，增加用户的点击可能性。

如何使用 Google AdSense

  1. 申请加入：你需要先申请 Google AdSense 账户。审核通常需要你有一个高质量的、符合 Google 政策的网站（有足够的原创内容、良好的用户体验等）。
  2. 广告代码生成：申请通过后，Google 会为你生成广告代码。你只需将这些代码嵌入到你的网站页面中，就可以开始展示广告了。
  3. 广告展示与收入生成：广告在网站上展示后，当用户点击广告或广告被展示时，你就开始赚取收入。
  4. 收入结算：AdSense 的结算周期通常是月结，当你的收入累计到一定额度后（通常是 $100 或以上），Google 会向你支付收入。

配置

使用谷歌账号登录后，根据引导完成三个步骤收款账号，广告位置确认，网站所有权验证，等待审核即可，对于我的个人网站项目，验证网站所属性已经搞定了，后续使用只需要后台设置就行。目前审核通过后才会有广告代码，后续会适配，也是后台配置id即可

GTM

Google Tag Manager（GTM） 是 Google 提供的一种标签管理系统（TMS，Tag Management System），它允许用户在网站或移动应用中轻松管理和部署各种跟踪代码和标签（例如：Google Analytics、Facebook Pixel、广告跟踪代码等）。通过 GTM，用户可以无需修改网站代码，便能快速添加、更新和管理各种标签。

主要功能

  1. 标签管理：

    • GTM 可以帮助你在一个界面中集中管理所有标签。你不再需要每次修改代码时都进入网站的源代码，只需在 GTM 界面上更新相关标签。
    • 你可以添加各种标签，如分析工具（Google Analytics）、广告跟踪（Google Ads、Facebook Ads）、A/B 测试、热图工具（Hotjar）、转化跟踪等。

  2. 触发器与规则：

    • 触发器：用于定义何时激活某个标签。例如，你可以设置一个触发器来监控特定页面的访问，或者某个按钮的点击。
    • 规则：帮助确定在哪些条件下触发标签。例如，访问某个页面时或者用户执行特定操作时触发某个标签。

  3. 版本控制和调试：

    • GTM 提供版本控制功能，每次对标签进行修改时，都会自动生成一个新版本，并保存所有的历史版本。这样，你可以回溯或恢复到之前的版本。
    • 内置调试工具可以帮助你实时测试和调试标签是否按预期工作。

  4. 跨平台支持：

    • GTM 支持网站、移动网站、iOS 和 Android 应用的标签管理，可以将一个标签管理系统扩展到多个平台。
    • 对于移动应用，GTM 提供了 SDK，可以将标签管理集成到应用中。

  5. 多用户协作：

    • GTM 支持多个用户协作管理标签，团队成员可以在不同权限级别下使用 GTM。比如，有的用户可以进行修改，而有的用户只能查看。
    • 可以设置不同的角色，如管理员、发布者、审查员等，以确保管理过程中的安全性和高效性。

  6. 集成 Google 服务：

    • GTM 与 Google 的其他工具（如 Google Analytics、Google Ads、Google Optimize）无缝集成，简化了数据追踪和广告优化的流程。

  7. 第三方标签支持：

    • 除了 Google 自家的工具，GTM 也支持第三方标签，比如社交媒体广告（Facebook Pixel）、营销自动化工具（HubSpot、Marketo）、优化工具（Optimizely）等。

使用流程

  1. 创建账户和容器：

    • 首先，你需要创建一个 Google Tag Manager 账户并为你的网站或应用创建一个"容器"。容器是你管理标签、触发器和变量的地方，每个网站或应用都有独立的容器。

  2. 安装 GTM 代码：

    • 在网站或应用的 HTML 中插入 GTM 提供的代码。这是 GTM 正常工作的前提，它会自动加载和触发你在 GTM 中配置的标签。

  3. 配置标签和触发器：

    • 在 GTM 中，你可以选择添加不同类型的标签（如 Google Analytics、AdWords 跟踪代码等），并为每个标签配置触发器，决定何时触发这些标签。

  4. 测试和发布：

    • 在发布标签之前，你可以使用 GTM 提供的预览和调试功能来测试标签是否正确工作。测试完成后，你可以发布更改，让标签在网站或应用中生效。

  5. 监控与优化：

    • 发布后，你可以在 Google Tag Manager 中随时查看标签的运行状态，确保它们按预期触发。此外，可以根据数据反馈不断优化标签的设置。

这个也比较简单，用谷歌账号登录，插入代码片段，项目中我已经搞定，在网站上创建账号，添加网站，获取id，在后台填写就可以

实现原理

引流公众号

我在网站设置中增加了几个字段，支持开启，关闭校验，支持过期时间设置，验证码在获取的时候会根据创建时间判断是否过期，如果过期则会创建新的验证码并更新

js 复制代码 
isOpenVerifyArticle?: boolean; // 是否开启校验
verificationCodeExpirationTime?: number; // 用于统一控制验证码的激活有效时间

在用户提交验证码的时候根据code去获取验证码的唯一标识，判断验证码是否被使用过，如果未被使用过，则去激活验证码，缓存验证信息和过期时间

js 复制代码 
// 验证码校验
  const handleVerification = async () => {
    if (!verificationCode) {
      setVerificationError("请输入验证码");
      return;
    }

    try {
      // 通过验证码查询状态
      const response = await fetch(
        `/api/captcha/available?code=${verificationCode}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        }
      );

      const data = await response.json();
      console.log("🚀 ~ handleVerification ~ data:", data);

      if (data.success && data.captcha && !data.captcha?.isUsed && !data.captcha?.isActivated) {
        // 更新验证码状态为激活
        const activateResponse = await fetch(
          `/api/captcha/${data.captcha._id}`,
          {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              code: data.captcha.code, // 使用从查询结果中获取的code
              target: "article_verification",
              isActivated: true,
              activatedAt: new Date().toISOString(),
              activationExpiryHours: site?.verificationCodeExpirationTime || 24, // 设置24小时的激活有效期
            }),
          }
        );

        const activateData = await activateResponse.json();
        console.log("🚀 ~ handleVerification ~ activateData:", activateData);
        if (!activateData.success) {
          setVerificationError("验证码状态更新失败，请重试");
          return;
        }

        setIsVerified(true);
        setShowVerification(false);
        setVerificationError("");
        setVerificationCode("");

        // 存储验证状态
        const verification: VerificationState = {
          verified: true,
          expireTime: activateData.expireTime,
        };
        localStorage.setItem(
          "article_verification",
          JSON.stringify(verification)
        );
      } else {
        setVerificationError(data.message || "验证码无效，请重试");
      }
    } catch (error) {
      console.error("验证过程出错:", error);
      setVerificationError("验证过程出错，请稍后重试");
    }
  };

文章详情页面判断是否开启校验

js 复制代码 
// 验证码相关状态
  useEffect(() => {
    const checkVerification = () => {
      // 如果未开启验证，直接设置为已验证状态
      if (!site?.isOpenVerifyArticle) {
        setIsVerified(true);
        setShowVerification(false);
        return;
      }

      const storedVerification = localStorage.getItem('article_verification');
      if (storedVerification) {
        const verification: VerificationState = JSON.parse(storedVerification);
        if (verification.expireTime > Date.now()) {
          setIsVerified(true);
          setShowVerification(false);
          return;
        } else {
          localStorage.removeItem('article_verification');
        }
      }
      setShowVerification(true);
    };

    checkVerification();
  }, [site?.isOpenVerifyArticle]);

谷歌分析 & GTM & 谷歌广告

这几个都是需要在项目中嵌入代码片段，然后在设置页检测，获取id来生效的，因为GTM支持添加谷歌分析，所以我们只需要管嵌入GTM代码就行了，然后在平台获取谷歌分析id去配置，具体是在根layout.tsx文件中添加嵌入，谷歌广告的验证信息可以用meta标签，所以我放在了generateMetadata中，nextjs的api，去自动生成meta，可以通过后台控制，是否接入广告

tsx 复制代码 
export async function generateMetadata(): Promise<Metadata> {
  const db = await getDb();
  const site = await db.collection("sites").findOne({});

  return {
    title: site?.title || "ObjectX's blog",
    description:
      site?.seo?.description || "ObjectX's articles about programming and life",
    keywords: site?.seo?.keywords || [],
    other:
      site?.isOpenAdsense && site?.googleAdsenseId
        ? {
            "google-adsense-account": `ca-pub-${site.googleAdsenseId}`,
          }
        : {},
  };
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        // 代码片段
        <GoogleTagManagerHead />
      </head>
      <body className={`${cn(inter.className)} h-dvh w-dvw`}>
        <SiteProvider>
          // 代码片段，这里主要是处理兼容性，保证在禁用js脚本执行的情况下GTM还能正确工作
          <GoogleTagManagerBody />
          <LayoutWrapper>{children}</LayoutWrapper>
        </SiteProvider>
      </body>
    </html>
  );
}

GoogleTagManagerHead组件

js 复制代码 
export default function GoogleTagManagerHead() {
  const { site } = useSiteStore();
  
  if (!site?.isOpenGtm || !site?.googleTagManagerId) return null;

  return (
    <Script id="google-tag-manager" strategy="afterInteractive">
      {`
        (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','${site.googleTagManagerId}');
      `}
    </Script>
  );
}

GoogleTagManagerBody组件实现

js 复制代码 
export default function GoogleTagManagerBody() {
  const { site } = useSiteStore();
  
  if (!site?.isOpenGtm || !site?.googleTagManagerId) return null;

  return (
    <noscript
      dangerouslySetInnerHTML={{
        __html: `
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=${site.googleTagManagerId}"
            height="0"
            width="0"
            style="display:none;visibility:hidden"
          ></iframe>
        `
      }}
    />
  );
}
相关推荐
m0_528723811 小时前
HTML中，title和h1标签的区别是什么？
前端·html
Dark_programmer1 小时前
html - - - - - modal弹窗出现时，页面怎么能限制滚动
前端·html
GDAL1 小时前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树1 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时，若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预，可以通过以下步骤实现：
前端·vue.js·echarts
贵州数擎科技有限公司1 小时前
使用 Three.js 实现流光特效
前端·webgl
JustHappy1 小时前
「我们一起做组件库🌻」做个面包屑🥖，Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪2 小时前
刷刷题16
前端·javascript·面试
我们的五年2 小时前
MySQL 架构
数据库·mysql·开源
冰 河2 小时前
‌最新版DeepSeek保姆级安装教程：本地部署+避坑指南
人工智能·程序员·openai·deepseek·冰河大模型
祈澈菇凉3 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果？
前端
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10本地部署DeepSeek后的调用与删除全攻略