Vaadin 23应用添加社交分享按钮与Google Analytics方法咨询

一、嵌入社交分享按钮（以 ShareThis 为例） #

Vaadin 23 支持嵌入第三方 JavaScript 代码，ShareThis 的社交分享按钮可通过以下两种方式实现：

方法1：直接插入 HTML 与 JS 代码 #

使用 Vaadin 的 Html 和 Div 组件快速集成：

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Html;
import com.vaadin.flow.router.Route;

@Route("share-demo")
public class ShareDemoView extends Div {
    public ShareDemoView() {
        // 插入 ShareThis 初始化脚本
        add(new Html("""
                <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=YOUR_PROPERTY_ID&product=inline-share-buttons" async="async"></script>
                """));
        
        // 添加分享按钮容器
        Div shareContainer = new Div();
        shareContainer.getElement().setAttribute("class", "sharethis-inline-share-buttons");
        add(shareContainer);
    }
}

将代码中的 YOUR_PROPERTY_ID 替换为你在 ShareThis 平台获取的实际属性ID。

方法2：封装为可复用的自定义组件 #

如果需要在多个视图中使用，可封装为自定义组件：

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;

@Tag("div")
@JsModule("https://platform-api.sharethis.com/js/sharethis.js#property=YOUR_PROPERTY_ID&product=inline-share-buttons")
public class ShareThisButtons extends Component {
    public ShareThisButtons() {
        getElement().setAttribute("class", "sharethis-inline-share-buttons");
    }
}

在视图中直接引用该组件即可：

@Route("share-demo")
public class ShareDemoView extends Div {
    public ShareDemoView() {
        add(new ShareThisButtons());
    }
}

二、集成 Google Analytics #

Vaadin 23 中添加 Google Analytics 有两种常用方案：

方法1：修改前端入口文件 frontend/index.html #

在 index.html 的 <head> 标签内添加跟踪代码，实现全局统计：

<head>
  <!-- 现有页面代码 -->
  <!-- Google Analytics 跟踪代码 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_TRACKING_ID');
  </script>
</head>

替换 GA_TRACKING_ID 为你的 Google Analytics 实际跟踪ID，这种方式会在应用启动时自动初始化统计，覆盖所有页面。

方法2：后端动态注入脚本 #

如果需要在特定视图或场景下启用统计，可通过 Vaadin 的 Page 对象动态注入脚本：

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.Page;

@Route("analytics-demo")
public class AnalyticsDemoView extends VerticalLayout {
    public AnalyticsDemoView() {
        Page page = getUI().get().getPage();
        
        // 加载 Google Analytics 脚本
        page.addJsModule("https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID");
        
        // 初始化跟踪配置
        page.executeJs("""
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'GA_TRACKING_ID');
        """);
    }
}

这种方式适合需要动态控制统计开关的场景，比如仅对特定用户群体启用统计。

内容的提问来源于stack exchange，提问作者alexanoid