整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

2023最新版将GA4的Google tag安装在网

2023最新版将GA4的Google tag安装在网站网页中的操作步骤

GA4的Google tag安装在网站网页中的操作方法:

1、打开GA4,点击左下角的管理(Admin),在媒体资源(Property)里找到信息流(Data Streams)

2、点击Web,然后点击右侧的箭头,如图所示

3、在页面最下方,点击查看代码View tag instructions右侧的箭头

4、按照提示将代码复制,安装在网页的指定位置

以上就是将GA4的Google tag安装在网站网页中的操作方法

014 年 Google 和 Adobe 共同合作开发一款名为「思源黑体」开放原始码字型,这项计划最令人期待的莫过于支持 CJK 字型,也就是针对繁体、简体中文、日文及韩文分别设计不同字型,尤其在免费中文字体选择不多的情况下无疑是个非常难能可贵的资源,而且也符合 Google「No more tofu」的目标──致力于解决全世界跨系统、语系无法正确显示部分字符等问题,也有开发者以此定制化出各种字型,例如思源柔黑体、思源真黑体。

经过近三年的努力,Google 和 Adobe 再宣布推出「思源宋体」免费字型下载!(或称思源明体,在 Google 部分是将中国大陆简体中文命名为宋体,香港、澳门及台湾则是明体;Adobe 没有分别一律称为思源宋体),这也是让许多用户期待以久的字型,有别于黑体的显示效果,其实思源宋体在细节处理上更接近中文感觉。

思源宋体目前支持四种不同的东亚语言,包括:繁体中文、简体中文、日文和韩文,和思源黑体一样有七种字重,每一种都有 65,535 个字符,设计一致性将有助于获得更好的视觉美感。繁体中文部分支持「教育部国字标准字体」内列出的所有文字。

思源宋体与思源黑体一样都已经针对屏幕显示进行优化处理,但和思源黑体不太一样的是若用于文学作品上感觉会比黑体来得更优雅,当然在印刷品使用也能获得更精美效果。详细介绍我推荐参考 Adobe 针对思源宋体设计的介绍网站,提供字体的设计背景、设计团队等说明。

免费下载思源宋体:Google Noto | GitHub | Adobe

使用教学

STEP 1

从 Google Noto Fonts 字体系列网站可以找到「Noto Serif CJK TC」,也就是繁体中文,点击右上角的「Download」即可下载、取得七种不同字重的思源宋体字型档,大小约在 124 MB 左右。

另外,从这网站里还能预览在不同字重下对于一段文字的呈现情形,如果想预览一下思源宋体我建议也可以到 Google Noto 网站(在 Typekit 网站也能找到,不过 Adobe 的命名为 Source Han Serif)。

STEP 2

下载后将档案解压缩,将 OTF 字型安装到计算机里就能使用,这套字型一共有七种不同字重,由细至粗分别为:ExtraLight、Light、Regular、Medium、SemiBold、Bold 和 Black。

假如你想要把思源宋体使用在网页里成为网页字型(Webfont)的话,现在 Google Fonts 还没开放,不过思源黑体可以在 Early Access 找到

. 概述

我们曾分享过《基于 GoogleMap 离线API在内网中加载离线卫星地图的方法》一文,在该文中我们分享了将GoogleMap离线API源码部署到本地的方法。

那么这个GoogleMap离线API是从哪里来的呢?

由于它并不像OpenLayers和MapBox等开源平台一样提供源码下载链接,因此只有将GoogleMap相关的JS源代码文件从GoogleMap官方网站解析下载到本地,这样才可以进行离线开发应用。

这里,我们就来分析一下从谷歌官方网站将GoogleMap API 源码离线下载到本地的方法。

2. 获取最新版本Google Map API 离线源码

通过以下网址打开谷歌官方网站的"Google地图平台文档"。

https://developers.google.cn/maps/documentation

Google地图平台文档


由于这里我们需要离线下载的是JS代码,因此选择"Maps JavaScript API",如下图所示。

Map JavaScript API


如果不习惯查看英文文档,在谷歌浏览器中打开后,可以通过点击"中文(简体)"查看中文翻译说明,有助于查阅文档。

可选择切换为中文


谷歌官方网的Map JavaScript API文档中,除了提供API调用函数外,还有许多API调用的示例,可以通过点击"Samples"进行查看,如下图所示。

API调用示例


我们通过打开浏览器的"开发者工具",可以查看打开示例时需要加载的所有文件。

开发者工具


在开发者工具中,当我们每打开一个示例时,都会显示当前页面中所加载的文件,当前我们只关心需要加载的JS文件。

在所有的JS文件中,只有路径中包括"zh_cn"的才是我们需要下载的JS文件,因此需要在过滤器中输入"zh_cn"进行过滤,如下图所示。

需要下载的JS文件


在需要保存的JS文件上单击鼠标右键后选择"Save as..."保存到本地,如下图所示。

保存JS文件


由于单个示例中并没有加载Google Map API所有的JS文件,但所有示例应该是能完全包括所有Google Map API所有JS文件的,因此我们需要打开每一个示例,将加载的JS文件与已经下载的JS文件作对比,将还没有下载的JS文件保存到本地,如下图所示。

对比保存还未下载的JS文件


以上方法是通过加载每一个示例,并找出不相同的JS文件进行保存,比较费时费力。

为了以后更方便地下载最新版本 Google Map API 的 JS 源代码文件,我们整理好了一个名为"LoadAllGoogleMapAPIJSFiles.html"的Web页面,该页面调用了Google Map API 的所有JS文件,只需要在浏览器中打开该页面后并将JS文件分别保存到本地即可,如下图所示。

加载所有JS文件


需要获取"LoadAllGoogleMapAPIJSFiles.html"文件,可以通过私信回复"GetGoogleMapJS"即可。

现在,我们已经把 Google Map API 所有相关的文件保存到本地了,一共有29个JS文件,如下图所示。

Google Map API 离线 JS 文件


3. 获取最新版本Google Map API 离线源码相关图片资源

前文讲解了如何获取最新版本 Google Map API 离线源码的方法,现在我们可以用同样的方法通过打开所有 Google Map API 调用示例下载所有的图片资源,如下图所示。

下载图片资源


同样地,如果打开每一个示例去下载图片的工作是比较繁琐的,我们已经把所有图片资源的URL链接放在了一个TXT文档中,如下图所示。

图片资源URL地址


需要获取 Google Map API JS 图片资源 URL 文件,可以通过私信回复"GetGoogleMapJS"即可。

需要特别注意的是,下载后的图片资源需要按URL中所示的路径建立相应的文夹进行存储,如下图所示。

图片资源下载结果


4. Google Map API JS 源代码的本地化修改

到目前为止,我们已经将 Google Map API 的全部JS文件和相关的图片资源文件下载到了本地。

但由于JS文件内部还存在链接到官网的URL,因此需要将代码进行一定的修改。

在"js.js"文件中查找"zh_cn",然后将代码"https://maps.googleapis.com/maps-api-v3/api/js/41/5/intl/zh_cn"

替换为"GoogleMapAPI/js",目的是为了加载本地的所需功能模块js文件,如下图所示。

修改js.js文件代码


在"common.js"文件中搜索"b,e,f",然后在"function"函数中加入"return true;",如下图所示。

修改common.js文件代码


现在需要将所有js文件中的网络链接,替换为本地链接。

通过Nodepad++或文字处理软件一次性打开 Google Map API 离线 JS 源代码文件,如下图所示。

打开所有JS文件


将所有js文件中的URL链接"https://maps.gstatic.com/mapfiles/api-3/"替换为"GoogleMapAPI/mapfiles/",目的是为了加载本地的图片资源,如下图所示。

源码本地化处理


方法同理,再将所有js文件中的URL链接"https://maps.gstatic.com/mapfiles/"替换为"GoogleMapAPI/mapfiles/";将所有js文件中的URL链接"api-3/images/"替换为"GoogleMapAPI/mapfiles/images/",目的也是为了加载本地的图片资源。

至此,将 Google Map API 的离线 JS 源码的本地化工作就完成了。

5. 总结

通过以上方法,你可以随时从谷歌官方网站获取最新版本的 Google Map API 离线文件源码,由于 Google Map API 在不断升级,以上具体操作细节可能随着时间的推移多少会有一定出入,但主体思路是不会有太大变化的。

以上获取最新版离线 Goolge Map API 源码的方法仅供参考,如果你有更好的获取方法,欢迎与我们交流并指正!

最后,本文中所提及的全部文档及 Google Map API 最新版 JS 源码,请通过私信回复"GetGoogleMapJS"即可获取!