308 lines
11 KiB
Markdown
308 lines
11 KiB
Markdown
title: Icarus User Guide - Web Analytics Plugins
|
||
date: 2017-01-31
|
||
categories:
|
||
- Plugins
|
||
- Analytics
|
||
tags:
|
||
- Icarus User Guide
|
||
language: en
|
||
toc: true
|
||
---
|
||
|
||
This article covers web analytics plugins supported by Icarus 3.
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-globe-asia mr-2"></i>This article is also available in
|
||
<a href="{% post_path zh-CN/Web-Analytics-Plugins %}">简体中文</a>.
|
||
</div>
|
||
</article>
|
||
|
||
<!-- more -->
|
||
|
||
<article class="message message-immersive is-primary">
|
||
<div class="message-body">
|
||
<i class="fas fa-info-circle mr-2"></i>The following web analytics plugins are provided by
|
||
<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>.
|
||
Please refer to it for a complete list of supported plugins and their configuration details.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message message-immersive is-danger">
|
||
<div class="message-body">
|
||
<i class="fas fa-exclamation-triangle mr-2"></i>All plugins mentioned below may be blocked by AD blockers.
|
||
Use them with caution.
|
||
</div>
|
||
</article>
|
||
|
||
## Baidu Statistics
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Baidu Statistics](https://tongji.baidu.com).
|
||
Click the "Add new website" button on the "Admin > Site list" page
|
||
and fill in the site information such as name and homepage URL.
|
||
Click "OK" to complete site creation.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/baidu-analytics-add-site.png 360 '"Add Site - Baidu Analytics" "Add Site - Baidu Analytics"' %}
|
||
<br>
|
||
|
||
2. On the next page, find the ID behind `hm.baidu.com/hm.js?` and set it as the value of
|
||
`plugins` > `baidu_analytics` > `tracking_id` in the theme configurations.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/baidu-analytics-get-code.png 360 '"Get Code - Baidu Analytics" "Get Code - Baidu Analytics"' %}
|
||
<br>
|
||
|
||
For example, the following Baidu Statistics code:
|
||
|
||
{% codeblock "Baidu Statistics code" lang:html %}
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?3f06f2b732a5b1034c989f74e28d0eea";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
{% endcodeblock %}
|
||
|
||
maps to the following theme configuration:
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
baidu_analytics:
|
||
tracking_id: 3f06f2b732a5b1034c989f74e28d0eea
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Bing Webmaster Tools
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Bing - Webmaster Tools](https://www.bing.com/toolbox/webmaster/).
|
||
Then, choose "Add your site manually" and enter the URL to your site.
|
||
Click "Add" button to continue.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-add-site.png 360 '"Add Site - Bing Webmaster Tools" "Add Site - Bing Webmaster Tools"' %}
|
||
<br>
|
||
|
||
2. In the "Add & verify site" panel, select "HTML Meta Tag" method.
|
||
Copy value of the `content` attribute in the HTML meta tag to the `plugins` > `bing_webmaster` > `tracking_id`
|
||
in the theme configurations.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-verify-site.png 360 '"Verify Site - Bing Webmaster Tools" "Verify Site - Bing Webmaster Tools"' %}
|
||
<br>
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
bing_webmaster:
|
||
tracking_id: ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF
|
||
{% endcodeblock %}
|
||
|
||
|
||
## BuSuanZi Web Counter
|
||
|
||
**Installation Guide**
|
||
|
||
1. Set the `plugins` > `busuanzi` to `true` to enable [BuSuanZi web counter](https://busuanzi.ibruce.info/)
|
||
and display the number of visitors on the header of each blog post and the bottom of the page.
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
busuanzi: true
|
||
{% endcodeblock %}
|
||
|
||
|
||
## CNZZ Statistics
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Umeng+](https://www.umeng.com/).
|
||
On the dashboard of Umeng+, click "Create new application" > "Web application".
|
||
Then, fill in your site information such as "website name", "site domain name", and "site homepage URL".
|
||
Click "Confirm adding the site" after finished.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/cnzz-add-site.png 360 '"Add Site - CNZZ" "Add Site - CNZZ"' %}
|
||
<br>
|
||
|
||
2. Find the HTML code in the "text style" row on the get installation code page.
|
||
Copy the values of `id` and `web_id` to the `plugins` > `cnzz` > `id` and `web_id` in the theme configurations,
|
||
respectively.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/cnzz-get-code.png 360 '"Get Code - CNZZ" "Get Code - CNZZ"' %}
|
||
<br>
|
||
|
||
For example, the following CNZZ installation code:
|
||
|
||
{% codeblock "CNZZ installation code" lang:html %}
|
||
<script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=123456789000&web_id=123456789000"></script>
|
||
{% endcodeblock %}
|
||
|
||
maps to the following theme configuration:
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
cnzz:
|
||
id: 123456789000
|
||
web_id: 123456789000
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Google Analytics
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Google Analytics](https://analytics.google.com/) and click the "Admin" on the left side of the user dashboard.
|
||
|
||
2. On the admin page, click the "Create Property" button and set "What do you want to measure?" to "Web".
|
||
Click the "Continue" button after that.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-create-property.png 360 '"Create Property - Google Analytics" "Create Property - Google Analytics"' %}
|
||
<br>
|
||
|
||
3. Then, fill in the Website Name, Website URL, Industry Category, and Reporting Time Zone.
|
||
Click the "Create" button to finish the property creation.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-property-setup.png 360 '"Property Setup - Google Analytics" "Property Setup - Google Analytics"' %}
|
||
<br>
|
||
|
||
3. Find the value of "Tracking ID", e.g., "UA-12345678-0", on the "Tracking Code" page.
|
||
Set it to the `plugins` >
|
||
`google_analytics` > `tracking_id` in the theme configurations to enable the Google Analytics plugin.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/google-analytics-get-code.png 360 '"Get Code - Google Analytics" "Get Code - Google Analytics"' %}
|
||
<br>
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
google_analytics:
|
||
tracking_id: UA-12345678-0
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Hotjar
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Hotjar](https://www.hotjar.com/) and click the ➕ (plus sign) > "Add new site" link on the top left of the page.
|
||
|
||
2. Fill in the "WEBSITE", "SITE TYPE", and "SITE OWNER", then click the "Add Site" button.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-new-site.png 360 '"New Site - Hotjar" "New Site - Hotjar"' %}
|
||
<br>
|
||
|
||
3. Find the newly created site on the "Sites & Organizations" page you have been redirected to.
|
||
Click the "Tracking Code" button on the right.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-site-list.png 360 '"Site List - Hotjar" "Site List - Hotjar"' %}
|
||
<br>
|
||
|
||
4. Copy the value of "Site ID" (e.g., 1234567) from the popup dialog to `plugins` > `hotjar` > `site_id` in the theme configurations
|
||
to enable the Hotjar plugin.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/hotjar-get-code.png 360 '"Get Code - Hotjar" "Get Code - Hotjar"' %}
|
||
<br>
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
hotjar:
|
||
site_id: 1234567
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Statcounter
|
||
|
||
**Installation Guide**
|
||
|
||
1. Log into [Statcounter](https://statcounter.com/).
|
||
Click "Add New Project" button in the "Projects" page.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-projects.png 360 '"Projects - Statcounter" "Projects - Statcounter"' %}
|
||
<br>
|
||
|
||
2. Fill in the website URL and project title in the "Add Project" page.
|
||
Tweak rest of the project settings if you need to.
|
||
Then, click the "Add Project" button.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-add-project.png 360 '"Add Project - Statcounter" "Add Project - Statcounter"' %}
|
||
<br>
|
||
|
||
3. Click "Continue to Default Installation" in the "Platform Check Complete" page.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-platform-check.png 360 '"Platform Check Complete - Statcounter" "Platform Check Complete - Statcounter"' %}
|
||
<br>
|
||
|
||
4. Finally, in the "Insert the Code on Your Website" page, copy the value of `sc_project` and `sc_security` variable in the HTML snippet
|
||
to `plugins` > `statcounter` > `project` and `plugins` > `statcounter` > `security` in the theme configurations, respectively.
|
||
|
||
{% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-insert-code.png 360 '"Insert Code - Statcounter" "Insert Code - Statcounter"' %}
|
||
<br>
|
||
|
||
For example, the following Statcounter code:
|
||
|
||
{% codeblock "Statcounter code" lang:html %}
|
||
<script type="text/javascript">
|
||
var sc_project=12345678;
|
||
var sc_invisible=1;
|
||
var sc_security="abcdef12";
|
||
var sc_https=1;
|
||
</script>
|
||
<script type="text/javascript"
|
||
src="https://www.statcounter.com/counter/counter.js"
|
||
async></script>
|
||
...
|
||
{% endcodeblock %}
|
||
|
||
maps to the following theme configuration:
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
statcounter:
|
||
project: 12345678
|
||
security: abcdef12
|
||
{% endcodeblock %}
|
||
|
||
|
||
## Twitter Conversion Tracking
|
||
|
||
**Installation Guide**
|
||
|
||
1. Follow [How to set up conversion tracking](https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html) to enable universal website tag of Twitter conversion tracking.
|
||
|
||
2. Find the `init` (Pixel ID) in your conversion tracking code. Copy its value to `plugins` > `twitter_conversion_tracking` > `pixel_id`
|
||
in the theme configurations.
|
||
|
||
For example, the following Twitter conversion tracking code:
|
||
|
||
{% codeblock "Twitter conversion tracking code" lang:html %}
|
||
<!-- Twitter universal website tag code -->
|
||
<script>
|
||
!function(e,n,u,a){e.twq||(a=e.twq=function(){a.exe?a.exe.apply(a,arguments):
|
||
a.queue.push(arguments);},a.version='1',a.queue=[],t=n.createElement(u),
|
||
t.async=!0,t.src='//static.ads-twitter.com/uwt.js',s=n.getElementsByTagName(u)[0],
|
||
s.parentNode.insertBefore(t,s))}(window,document,'script');
|
||
// Insert Twitter Pixel ID and Standard Event data below
|
||
twq('init','abcdef');
|
||
twq('track','PageView');
|
||
</script>
|
||
<!-- End Twitter universal website tag code -->
|
||
{% endcodeblock %}
|
||
|
||
maps to the following theme configuration:
|
||
|
||
{% codeblock _config.icarus.yml lang:yaml %}
|
||
plugins:
|
||
twitter_conversion_tracking:
|
||
pixel_id: abcdef
|
||
{% endcodeblock %}
|
||
|
||
|
||
<article class="message message-immersive is-warning">
|
||
<div class="message-body">
|
||
<i class="fas fa-question-circle mr-2"></i>Something wrong with this article?
|
||
Click <a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/en/Web-Analytics-Plugins.md">here</a>
|
||
to submit your revision.
|
||
</div>
|
||
</article>
|