Coder Social home page Coder Social logo

halo-sigs / plugin-umami Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 7.0 8.03 MB

Halo 2.0 对 Umami 的集成。

Home Page: https://halo.run/store/apps/app-KfOps

License: GNU General Public License v3.0

JavaScript 5.73% Vue 19.18% TypeScript 39.38% Java 35.71%
halo halo-plugin umami

plugin-umami's Introduction

plugin-umami

Halo 2.0 对 Umami 的集成。

Umami

特性

  • 支持注入 Umami 的统计代码到每个页面的 head 标签内。
  • 支持设置分享链接以供在 Halo 控制台查看统计数据。

后续计划

  • 通过调用 Umami 的接口,实现一些 Dashboard 的 Widget。

安装与使用

  1. Releases 下载最新的 JAR 文件。

  2. 在 Halo 后台的插件管理上传 JAR 文件进行安装。

  3. 启动该插件之后,需要在设置配置 Umami 的相关信息

  4. 进入插件设置页面,配置以下信息:

    • Umami 的站点地址:Umami 服务的外部访问地址
    • 脚本名称:根据实际情况添加,Umami 1.x 默认为 umami.js,Umami 2.x 默认为 script.js
    • 站点 ID:可在 Umami 的设置 -> 网站 -> 编辑中找到
    • 共享链接:共享链接需要您手动为对应的网站开启,设置之后可以在 Halo 后台的 Umami 菜单进行访问。

FAQ

  1. 在 Console 无法加载 Umami 的页面,出现了 CORS 和 CSP 的错误。

    1. 方式 1:在 Umami 反代的配置文件中加入如下配置(请替换域名):

      server{
          listen 443 ssl http2;
          server_name [umami.domain.com];
          #...
          add_header Access-Control-Allow-Origin 'https://halo.domain.com';
          add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
          add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
          if ($request_method = 'OPTIONS') {
              return 204;
          }
      
          add_header Content-Security-Policy 'frame-ancestors halo.domain.com';
          location / {
              #...
              proxy_hide_header 'Access-Control-Allow-Origin';
              proxy_hide_header 'Content-Security-Policy';
          }
      
      }
      
    2. 方式 2:为 Umami 的容器添加环境变量 ALLOWED_FRAME_URLS,值为 Halo 的访问地址,例:

      ALLOWED_FRAME_URLS=https://www.halo.run
      

      此方式适用于 Umami 2.3.0 以上版本。

plugin-umami's People

Contributors

chy9002 avatar johnniang avatar lilgg avatar ruibaby avatar v-official-233 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

plugin-umami's Issues

提供data-cache和data-domains支持

https://umami.is/docs/tracker-configuration

摘录自官方文档

data-cache
If you get a lot of pageviews from the same user, for example in a forum website, you can cache some data to improve the performance of the tracking script.

Note: This will use session storage so you may need to inform your users.

Usage:

<script
  defer
  src="http://mywebsite.com/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-cache="true"
></script>

data-domains
If you want the tracker to only run on specific domains, you can add them to your tracker script. This is a comma delimited list of domain names. Helps if you are working in a staging/development environment.

Usage:

<script
  defer
  src="http://mywebsite.com/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-domains="mywebsite.com,mywebsite2.com"
></script>

关于写好umami,设置里头的配置项之后,出现了访问不了的情况

那个ID是填对的,站点地址就是域名,不加http或者https,那个共享链接也是对的,他就是那个工具旁边访问那个umami 会访问不了,会出现这个报错提示
net::ERR_BLOCKED_BY_RESPONSE 由于web服务不允许 iframe 引用,需要在 web服务中设置 X-Frame-Options HttpServletResponse response.setHeader (“x- frame -options”, “DENY”); 设置有3种参数 请问有什么解决办法?,

若Umami使用nginx反代, 可能会无法正常使用

因为我的Umami是由Nginx反代的, 所以在使用过程中遇到了CORS和CSP的问题. 以下是我在Umami反代中做出的调整.

server{
        listen 443 ssl http2;
        server_name {umami.domain.com};
        ...
        add_header Access-Control-Allow-Origin '{https://blog.domain.com}';
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        if ($request_method = 'OPTIONS') {
           return 204;
        }

        add_header Content-Security-Policy 'frame-ancestors {blog.domain.com}';
        location / {
        proxy_pass http://localhost:3000;
        ...
        proxy_hide_header 'Access-Control-Allow-Origin';
        proxy_hide_header 'Content-Security-Policy';

}

umami.js被广告拦截插件屏蔽的问题

最近才注意到浏览器装了广告拦截插件,控制台出现报错,
经查询了解屏蔽插件是通过检测脚本文件名来拦截插件的,因此需要修改脚本名称。

后来修改脚本名称,https://umami.域名.com/修改的名称.js
发现不起作用,看了插件代码这一段,原来自动把后缀加上
就成了https://umami.域名.com/修改的名称.js/umami.js
image

建议:插件代码去掉umami.js,umami后台后src那边本来就是全的吗,直接复制就行
image

无法配置共享链接

halo版本:2.1.0
plugin-umami版本:1.0.0
问题:
点击umami菜单,提示“未正确配置 Umami 的共享链接”,只有一个“OK”选项,没有配置引导

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.