github图像处理_将信标图像用于GitHub，网站和电子邮件分析

github图像处理

介绍 (Introduction)

There are many ways to track traffic on your website. By far, one of the most popular ones is Google Analytics which, when signed up for, provides you with a tracking code embedded in a JavaScript snippet which you then include on every page you want tracked. This is a very simple and effective solution, and most other analytics providers do more or less the same thing.

有许多方法可以跟踪您网站上的流量。 到目前为止，最受欢迎的工具之一是Google Analytics(分析)，该工具在注册后为您提供了嵌入在JavaScript代码段中的跟踪代码，然后您将该代码包含在要跟踪的每个页面中。 这是一个非常简单且有效的解决方案，大多数其他分析提供程序或多或少都在做同一件事。

Things get complicated, however, when dealing with content into which you cannot simply paste a block of working JavaScript code – for example, GitHub repositories and pages, emails, and more. Those resources do, however, support embedding images – and that's what we can take advantage of.

但是，当处理内容时，您不能简单地将一段有效JavaScript代码粘贴到其中，例如，GitHub存储库和页面，电子邮件等，事情就变得复杂了。 但是，这些资源确实支持嵌入图像-这就是我们可以利用的资源。

信标图像 (Beacon images)

Traditionally, beacon images work like this:

传统上，信标图像的工作方式如下：

• Embed an image resource in your email/page
  将图像资源嵌入到您的电子邮件/页面中

• The src attribute of the image points to a URL on your server

  图片的src属性指向服务器上的URL

• The client (browser, email client) then requests the URL as usual, expecting a normal image
  然后，客户端(浏览器，电子邮件客户端)会像往常一样请求URL，并期待正常的图像
• The server, instead of directly serving the image, first goes through a set of instructions noting down the HTTP request's details – visitor IP, time, etc – and saving these stats into a database
  服务器首先直接通过一组指令记录HTTP请求的详细信息(访问者IP，时间等)，而不是直接提供图像，然后将这些统计信息保存到数据库中
• The server then returns an image, or a fake image to make it invisible – usually a 1×1 transparent pixel (useful for example at the bottom of a text email – no point in having an actually visible image there and appear spammy).
  然后，服务器返回图像或伪造的图像以使其不可见-通常为1×1透明像素(例如，在文本电子邮件的底部很有用-在那里没有实际可见的图像并显示为垃圾邮件是没有意义的)。

This isn't very straightforward to implement, though, and it's nigh impossible to replicate the dashboard and detailed country stats that Google Analytics offers by default in a timeframe that makes it worthwhile.

不过，这并不是很容易实现，并且在一定时间内复制Google Analytics(分析)默认提供的信息中心和详细的国家/地区统计数据几乎是不可能的。

The other aspect of beacon images, and their most common use, is emails – including them in your emails allows you to track the open vs. sent ratio. Emails could never include active JS snippets in the body, so beacon images are more or less the only solution, and the data harvested this way is unreliable at best – people with HTML off by default won't ever load the images, and will track as unopened even if they did read the email. Still, some data can be collected this way.

信标图像的另一个方面及其最常见的用途是电子邮件-电子邮件中包括它们，您可以跟踪打开比率与发送比率。 电子邮件的主体中永远不会包含活动的JS代码段，因此信标图像或多或少是唯一的解决方案，并且以这种方式收集的数据充其量是不可靠的-默认情况下，处于HTML禁用状态的人永远不会加载图像，并且会进行跟踪即使他们确实阅读了电子邮件也未打开。 仍然可以通过这种方式收集一些数据。

Wouldn't it be nice if our beacon automatically uploaded data to Google Analytics and laid it all nicely out for us in a custom dashboard?

如果我们的信标自动将数据上传到Google Analytics(分析)，并在自定义仪表板中为我们很好地展示了所有数据，那会不会很好？

加信标 (ga-beacon)

Ilya Grigorik, developer advocate and performance engineer at Google (definitely follow him if you care about your website's performance), decided to take beaconing of closed resources to another, simpler level, and solve the issue mentioned in the last paragraph. He built ga-beacon, a quick solution for implementing beacon images into absolutely any web resource along with automatic structured reporting in a custom GA dashboard.

Google的开发倡导者兼性能工程师Ilya Grigorik (如果您关心网站的性能，一定要关注他)，决定将封闭资源的信标提升到另一个更简单的水平，并解决上一段中提到的问题。 他构建了ga-beacon ，这是一种用于将信标图像实施到几乎任何Web资源中的快速解决方案，以及在自定义GA仪表板中的自动结构化报告。

His example uses ga-beacon for tracking the visits of his GitHub repos and pages, but it can be used for any other web resource in which you have access to content but not to source code. See a sample of the dashboard in the image below, as grabbed from the repo:

他的示例使用ga-beacon跟踪GitHub存储库和页面的访问，但是它可用于您可以访问内容但不能访问源代码的任何其他Web资源。 从回购中获取以下图片中的仪表板示例：

Note that due to beacon tracking being only a src request, it cannot track referrals – the actual visited page (be it GitHub or something else) does have this information, but grabbing content from the image URL is a completely separate request and, as such, does not have access to the referrer info.

请注意，由于信标跟踪只是一个src请求，它无法跟踪引用–实际访问的页面(无论是GitHub还是其他东西)确实具有此信息，但是从图像URL抓取内容是一个完全独立的请求，因此，无权访问引荐来源信息。

实施ga-beacon (Implementing ga-beacon)

While there are instructions in the repo README, I believe it's best if we cover them step by step with screenshots here, so you can try it out for yourself. We'll also be implementing ga-beacon in an email message later on.

尽管回购自述文件中有说明，但我认为最好在此处通过屏幕截图逐步介绍它们，因此您可以自己尝试一下。 稍后，我们还将在电子邮件中实现ga-beacon。

步骤1：GA帐户和代码 (Step 1: GA account and code)

If you don't have an Analytics account yet, get one here. Go into Admin, and add a new account:

如果您还没有Google Analytics(分析)帐户，请在此处获得一个。 进入管理员，并添加一个新帐户：

Pick "Website", leave all options on default, and populate the following:

选择“网站”，将所有选项保留为默认，然后填充以下内容：

• Account Name / Website Name: anything you want. As I'll be implementing this into my GitHub repos just like Ilya did in the example, I'll pick "GitHub projects" as the name.
  帐户名称/网站名称：您需要的任何名称。 正如我将在示例中用Ilya一样将其实现到GitHub存储库中时，我将选择“ GitHub项目”作为名称。

• Website: as per instructions, put "https://ga-beacon.appspot.com/"

  网站：按照说明，输入“ https://ga-beacon.appspot.com/ ”

Get the tracking code by finishing the process and accepting the license agreement that pops up.

通过完成该过程并接受弹出的许可协议，获取跟踪代码。

Up until this step, the procedure was identical to what you would do if you were setting up a regular website for tracking, for which you have source access. In fact, the code produced on the next screen can be pasted into any website's source, and it will do full and proper tracking – referrals and all. We, however, only need the tracking ID. Copy this tracking ID now.

在此步骤之前，该过程与您要设置具有访问权限的常规网站所要执行的操作相同。 实际上，可以在下一个屏幕上生成的代码可以粘贴到任何网站的源代码中，并且它将进行完整，适当的跟踪-引荐和全部。 但是，我们只需要跟踪ID。 立即复制此跟踪ID。

Before adding the beacon image to our properties, let's first install a custom dashboard to our GA account. Custom dashboards are pre-configured layouts and styles for displayed data, saved as templates for others. The custom dashboard can be installed from this link. In the dropdown offered in the popup, select the newly created property and its "All Website Data" option.

在将信标图片添加到我们的媒体资源之前，我们先将自定义信息中心安装到我们的GA帐户中。 定制仪表板是用于显示数据的预配置布局和样式，另存为其他模板。 可以从此链接安装自定义仪表板。 在弹出窗口提供的下拉菜单中，选择新创建的属性及其“所有网站数据”选项。

The default dashboard will now be replaced by the custom dashboard. If not, see the Dashboard menu in the left sidebar and select this custom dashboard there.

现在，默认仪表板将由自定义仪表板代替。 如果不是，请参见左侧栏中的“仪表板”菜单，然后在此处选择此自定义仪表板。

We're ready to implement the beacon image into our pages now.

我们现在准备将信标图像实现到我们的页面中。

For this example, I'll be adding the beacon to my ChromeSkel_a repo. It's a bit outdated now, haven't played with it for a while, but it still seems to be getting some traffic and I'm interested in that. I don't even need to clone, edit and push – I can make the change on-the-fly through the Edit button.

对于此示例，我将向我的ChromeSkel_a存储库添加信标。 现在有点过时了，已经有一段时间没有玩了，但是它似乎仍然吸引了一些流量，对此我很感兴趣。 我什至无需克隆，编辑和推送-我可以通过“编辑”按钮即时进行更改。

I add the MarkDown syntax for images, ![](http://image/url) and use https://ga-beacon.appspot.com/UA-XXXXX-X/your-repo/page-name, where UA-XXXXX-X is the Tracking ID from before, and your-repo/page-name is an arbitrary path used to group data better in the GA dashboard. Put together, the text I added to my README file in the repo I mentioned above is:

我为图像添加了MarkDown语法![](http://image/url)并使用https://ga-beacon.appspot.com/UA-XXXXX-X/your-repo/page-name ，其中UA -XXXXX-X是之前的跟踪ID，而your-repo/page-name是用于在GA信息中心中更好地对数据进行分组的任意路径。 综上所述，我在上述存储库中添加到自述文件的文本为：

[![Analytics](https://ga-beacon.appspot.com/UA-46899860-1/chromeskel_a/readme)](https://github.com/igrigorik/ga-beacon)

and produces the following badge:

并产生以下徽章：

If you'd rather the badge not be visible, you can add a no-value query param ?pixel to the URL like so:

如果您希望徽章不可见，则可以向URL添加一个无值查询参数?pixel ，如下所示：

[![Analytics](https://ga-beacon.appspot.com/UA-46899860-1/chromeskel_a/readme?pixel)](https://github.com/igrigorik/ga-beacon)

This then makes the beacon image a 1×1 transparent pixel. See below image – the badge is not visible, but the dev tools show us it's obviously there.

然后，这使信标图像成为1×1透明像素。 参见下图–徽章不可见，但是开发工具向我们显示了徽章。

I prefer the badge, so I'll leave it without the ?pixel param.

我更喜欢徽章，所以我将其保留为?pixel参数。

That's it. ga-beacon is now installed in the README page. We can now save and commit this, and everyone accessing the root page of the chromeskel_a repo will be logged and visible in our new GA dashboard. If I refresh the page now and look at the dashboard while keeping the page open, I'm registered as an "Active Visitor".

而已。 ga-beacon现在已安装在README页面中。 现在，我们可以保存并提交，访问chromeskel_a存储库根页面的每个人都将在新的GA信息中心中记录并可见。 如果现在刷新页面并在保持打开状态的同时查看仪表板，则表示我已注册为“活动访问者”。

电子邮件实施 (E-mail implementation)

Using ga-beacon in emails is just as straightforward as using it on websites and GitHub pages. First, make a new GA property, again a website, and this time give it a name of "My newsletter" or something of the like.

在电子邮件中使用ga-beacon就像在网站和GitHub页面上使用它一样简单。 首先，新建一个Google Analytics(分析)媒体资源，再创建一个网站，这次给它起一个“我的新闻通讯”之类的名称。

The dashboard from before is already installed, so no need to set that up. Grab the Tracking ID, and start writing an email. Include a picture inline – and give it the same URL from before, only change the tracking code and the path – the path can be the email subject, the title of the newsletter campaign, or whatever else you see fit. For example, I used this URL:

之前的仪表板已经安装，因此无需进行设置。 获取跟踪ID，然后开始写电子邮件。 内嵌图片-并从前​​使用相同的URL，仅更改跟踪代码和路径-路径可以是电子邮件主题，新闻通讯活动的标题或您认为合适的任何其他内容。 例如，我使用以下URL：

https://ga-beacon.appspot.com/UA-46899888-1/my_newsletter?pixel

This time, we're using the ?pixel param because we want the image to remain invisible. The email might have nothing to do with what the badge represents, and it might look suspicious or bad to the end user reading it if visible.

这次，我们使用?pixel参数，因为我们希望图像保持不可见。 电子邮件可能与徽章所代表的内容无关，并且对于最终用户阅读可见的电子邮件可能看起来可疑或不好。

Now, send the email to several recipients (with their prior permission, of course), and observe the dashboard. If all goes well, you should see the "visit" count go up. You can modify the widgets in the dashboard to say "Opened" instead of "Visit", etc.

现在，将电子邮件发送给多个收件人(当然，需要事先获得他们的许可)，然后观察仪表板。 如果一切顺利，您应该会看到“访问”计数增加。 您可以将仪表板上的小部件修改为“已打开”，而不是“访问”等。

If you're sending multiple newsletter campaigns, you can just change the path part of the URL, and it will be reflected in the dashboard – no need to get a new Tracking ID.

如果您要发送多个新闻通讯活动，则只需更改URL的路径部分，它就会反映在信息中心中-无需获取新的跟踪ID。

结论 (Conclusion)

Beacon images are incredibly useful for tracking stats where stats are not usually trackable. They help us stay on top of our audience, and assist us in improving our online presence. This article covered one of the easiest methods of implementing beacon images in your content and analyzing the received data with Google Analytics. Give it a try, and leave any feedback in the comments below!

信标图像对于通常无法跟踪统计信息的跟踪统计数据非常有用。 他们帮助我们保持在受众群体中的领先地位，并帮助我们改善在线形象。 本文介绍了在您的内容中实施信标图像并使用Google Analytics(分析)分析接收到的数据的最简单方法之一。 试试看，并在下面的评论中留下任何反馈！

Edit: Just moments after this article was written, GitHub introduced actual analytics: https://github.com/blog/1672-introducing-github-traffic-analytics. Regardless, you can still use this approach to track visits to any other resources where you might have control over content, but not over source code – if you’re a guest blogger somewhere, in emails, or if you have a Ghost.org blog which doesn’t yet allow custom editing of source files, etc.

编辑：在撰写本文之后，GitHub引入了实际的分析方法： https : //github.com/blog/1672-introducing-github-traffic-analytics 。 无论如何，如果您是某个地方的来宾博客，电子邮件或Ghost.org博客，您仍然可以使用这种方法来跟踪对内容可能具有控制权但对源代码没有控制权的任何其他资源的访问尚不允许自定义编辑源文件等。

翻译自: https://www.sitepoint.com/using-beacon-image-github-website-email-analytics/

github图像处理