在next js中添加google analytics功能

最新推荐文章于 2024-05-22 09:33:36 发布

梦实现了吗

最新推荐文章于 2024-05-22 09:33:36 发布

阅读量670

点赞数

分类专栏： frontend 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/majiayu000/article/details/129272177

版权

frontend 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Google Analytics

如果想要统计网站的访问数据、性能数据，可以通过google analytics来添加支持。

在这里插入图片描述
填入需要的网站地址和名称。可以得到一个G-XXXXXXXX的代码。
如图

就是衡量ID。

页面配置

找到_app.tsx(__app.tsx)。将如下代码复制到<HEAD>上下均可。

<Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=G-WTZ3T770H />
<Script strategy="lazyOnload">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', G-WTZ3T770H, {
page_path: window.location.pathname,
});
`}
</Script>

注意要将G-XXXX替换为自己的衡量ID。

CSP

内容安全策略是一个额外的安全层，有助于检测和缓解某些类型的共计，包括跨站点脚本和数据注入攻击。
配置好google的js后，需要将相应的域名添加到CSP中。

 `...
  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.googletagmanager.com *.google-analytics.com;
  ...
 `

然后重新上线网站，等一会就能在google analytics中看到自己的网站信息了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梦实现了吗

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在next js中添加google analytics功能

如果想要统计网站的访问数据、性能数据，可以通过来添加支持。填入需要的网站地址和名称。可以得到一个G-XXXXXXXX的代码。如图就是衡量ID。
复制链接

扫一扫

专栏目录

Hexo的Next主题中配置Google Analytics之后不生效的问题

以技术之名的博客

06-27

564

最近在优化Hexo博客，添加网站分析的功能，在配置Google Analytics之后，一直无法生效，最终发现是因为网站配置文件_config.yml中配置的url和 GitHub Pages的自定义域名不一致导致的。如果没有配置自定义域名的话应该没有问题，但是如果配置了自定义域名的话，一定要保证网站配置文件_config.yml中配置的url和 GitHub...

weixin_44510200的博客

03-19

892

几行代码，在Next.js中引入Google Analytics4，帮助你接入谷歌分析和完成谷歌分析事件发送功能

参与评论您还未登录，请先登录后发表或查看评论

next-ga:易于集成的Next.js HOC，可以轻松集成Google Analytics（分析）并记录每个页面更改

05-16

@ guivic / next-ga 易于集成的Next.js HOC，可以轻松集成Google Analytics（分析）并记录每个页面更改没有准备好生产安装 npm install @guivic/next-ga --save yarn add @guivic/next-ga 用法将中间件添加到您的自定义_app.js中 import { withGA } from '@guivic/next-ga' ; // .... export default withGA ( MyApp , options ) ; 选项价值笔记 GA_ID String 。可选的。 GA跟踪ID，例如UA-000000-01 。如果未提供，它将使用process.env.GA_ID 作者来自Guillaume Galas 执照根据许可。

推荐开源项目：Next.js Google Analytics

最新发布

gitblog_00083的博客

05-22

250

next-stats-action:用于为Next.js拉取请求生成统计信息的GitHub动作

05-12

Next.js统计GitHub动作下载并运行具有提供的配置的统计信息以比较分支的项目并运行可以在Next.js 查看它的运行情况入门使用和要运行的任何文件（例如要构建的测试应用程序）将.stats-app文件夹添加到项目中将操作添加到您的享受统计数据统计配置 const StatsConfig = { // the Heading to show at the top of stats comments commentHeading : 'Stats from current PR' | undefined , commentReleaseHeading : 'Stats from current release' | undefined , // the command to build your project if not done on post in

该如何加载google-analytics(或其他第三方)的JS (转自http://www.cnblogs.com/BearsTaR/archive/2010/05/12/best_use_google_analytics.html)

fjfdszj的专栏

05-12

1113

很多网站为了获取用户访问网站的统计信息，使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics,简称ga)。注册ga后，ga就会生成一段js脚本，很多人直接把这段js复制到的最后面就完事(包括博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗？哪怎么样才算是合理，怎样才是不合理了？因ga只是1个分析工具

next-with-analytics:适用于Next.js的简约分析助手，该助手遵循不跟踪（DNT）标头

05-17

其他功能包括：匿名支持IP 调试模式安装 # yarnyarn add @pinjollist/next-with-analytics# npmnpm install --save @pinjollist/next-with-analytics用法初始化分析initAnalytics函数将创建一个并将任何传递给该。...

next-js：Next.js模板

02-05

在`next-js-master`这个压缩包中，包含了Next.js项目的源代码。你将找到配置文件、源码目录（通常在`pages`、`components`下）、样式文件、测试文件等，这些都符合上述提到的各种技术栈和最佳实践。通过深入学习和...

Laravel开发-google-analytics

08-27

在本文中，我们将深入探讨如何在Laravel框架中集成Google Analytics，以便为你的Web应用程序提供强大的数据统计和分析功能。Laravel是PHP的一种流行且优雅的Web开发框架，而Google Analytics则是Google提供的一个...

pika-pokedex-nextjs：使用next.js的Pokedex PWA生产就绪示例

02-18

匹卡得克斯 ... pages：包含应用程序主页和API端点定义（Next.js约束）的源代码。 public：包含应用程序静态资源。 src：包含应用程序源代码。测试：包含应用程序测试。安装/入门克隆源代码存

Nextjs

热门推荐

woyebuzhidao321的博客

04-14

1万+

一、Next.js 介绍 Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用. 支持两种预渲染方式, 静态生成和服务器端渲染. 基于页面的路由系统, 路由零配置自动代码拆分. 优化页面加载速度. 支持静态导出, 可将应用导出为静态网站. 内置 CSS-in-JS 库 styled-jsx 方案成熟, 可用于生产环境, 世界许多公司都在使用应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境二、创建 Next.js 项目创建: npm i

Next.js（二）Next.js基本使用

weixin_45566730的博客

05-26

7139

Next.js学习笔记

Vue使用谷歌统计和百度统计

weixin_43968658的博客

03-01

2557

谷歌统计统计网站流量 Index.html 页面插入 //header中插入 <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Da...

js实现谷歌网站统计

weixin_30945039的博客

12-08

208

基本方法 function ga() { if (window.ga) { window.ga.apply(null, arguments); } else { stack.push(arguments); } } 我们可以对ga方法通过apply或call进行参数扩展比如 function gaSendEve...

使用 Google Analytics 跟踪 JavaScript 错误

weixin_34278190的博客

04-17

157

　　Google Analytics（谷歌分析）不仅仅是一个流量统计工具，你还可以用它来测量广告活动的有效性，跟踪用户多远到所需的页面流（从点击广告到购物车到结账页面）获取，并基于用户的信息设置浏览器和语言环境支持。　　但是，这一切东西都不是我们开发者所需要的。今天给大家介绍一个很另类的技巧，通过自定义事件跟踪 JavaScript 错误。下面就让我们来看看如何实现的错误检查的...

Google Analytics中analytics.js的使用

wanna_wsl的博客

12-17

2860

1.analytics.js是Google后来推出的用于GA收集信息的js，以前是ga.js 不同之处：(1). cookie的不同，后版本的cookie是_ga，前版本的cookie有好多，参考链接 (2). 使用方法不同，是极大的不通，但是后版本的功能更加强大。在这里讲解的是analytics.js。2.使用 analytics.js 进行的所有跟踪几乎都可以使用 ga() 命令队列完成，所

Hexo-blog-yilia主题迭代 -- 增加RSS功能+百度统计/google统计

Dora之城

01-26

1124

增加RSS功能安装RSS插件注意一定要安装到blog的根目录 npm install --save hexo-generator-feed 在你的项目的‘_config.yml‘配置文件下找到Extensions添加如下内容： # Extensions #插件和主题 ## Plugins: https://hexo.io/plugins/ ## Themes: https://h...

官网《Next.js —— 为页面获取数据》

ab110911的博客

07-05

2514

现在我们知道如何创建一个像样的Next.js应用了，并且也充分使用了Next.js路由API。在实践中，我们通常要从远程数据源获取数据。Next.js具备标准的获取数据的API，那就是成为同步函数的'getInitialProps'.用这个函数，我们就能从远程获取数据，并且以属性的方式传递回页面。我们能同时在客户端和服务端写入这个函数，所以，自然而然可以在两端使用。在这节课中，通过使用"get...

如何在next.js里面用bootstrap5.3实现分页功能

07-14

要在 Next.js 中使用 Bootstrap 5.3 实现分页功能，您可以按照以下步骤进行操作： 1. 在 Next.js 项目中安装 Bootstrap 5.3。可以使用 npm 或者 yarn 命令进行安装： ```bash npm install bootstrap@5.3 ``` 或 ```bash yarn add bootstrap@5.3 ``` 2. 在 Next.js 中创建一个分页组件。您可以在 `components` 文件夹下创建一个新的组件文件，例如 `Pagination.js`。 ```jsx import Link from 'next/link'; export default function Pagination({ currentPage, totalPages }) { return ( <nav aria-label="Page navigation"> <ul className="pagination"> {Array.from({ length: totalPages }, (_, i) => ( <li className={`page-item ${i + 1 === currentPage ? 'active' : ''}`} key={i}> <Link href={`/?page=${i + 1}`}> <a className="page-link">{i + 1}</a> </Link> </li> ))} </ul> </nav> ); } ``` 3. 在页面组件中使用分页组件，并传递当前页数和总页数作为 props。 ```jsx import { useRouter } from 'next/router'; import Pagination from '../components/Pagination'; export default function Home() { const router = useRouter(); const { page } = router.query; const currentPage = page ? parseInt(page) : 1; const totalPages = 10; // 替换为实际的总页数 return ( <div> {/* 显示数据 */} {/* ... */} {/* 显示分页组件 */} <Pagination currentPage={currentPage} totalPages={totalPages} /> </div> ); } ``` 这样，您就可以在 Next.js 中使用 Bootstrap 5.3 实现分页功能了。注意替换 `totalPages` 的值为实际的总页数，并根据需要调整样式和其他参数。希望能对您有所帮助！