Next.js项目中无法追踪SSO嵌入Looker仪表盘的事件

核心修复方案 #

你的代码仅监听了部分特定操作事件，未配置点击类事件的监听逻辑。结合Looker Embed SDK的能力，可通过两种方式实现点击事件捕获：

方式一：利用Embed SDK内置点击事件 #

Looker Embed SDK提供了多个内置点击事件，直接绑定到嵌入实例即可捕获对应操作：

• dashboard:tile:click：捕获仪表盘内图表（tile）的点击
• drillmenu:click：捕获钻取菜单的点击（你已添加，可扩展逻辑）
• look:click：捕获Look报表内的点击

修改客户端嵌入代码，添加这些事件监听：

import React, {useCallback, useEffect} from "react"
import {LookerEmbedSDK} from "@looker/embed-sdk"

type embeddedDashboardType = {
    id : number
    setError? :  ((errorMsg : string) => void)
}

export const EmbeddedDashboard = ({id, setError} : embeddedDashboardType) => {
    // 处理仪表盘Tile点击
    const handleTileClick = (event: any) => {
        console.log("仪表盘Tile点击详情：", event)
        // 这里可添加埋点、业务跳转等逻辑
    }

    // 处理钻取菜单点击
    const handleDrillClick = (event: any) => {
        console.log("钻取菜单点击详情：", event)
        return { cancel: !event.modal }
    }

    const embedCtrRef = useCallback((el) => {
        const authUrl = "/api/looker-sso"
        // 替换为你的实际Looker域名，比如从环境变量读取
        const lookerHost = process.env.NEXT_PUBLIC_LOOKER_HOST

        if (el && lookerHost) {
            LookerEmbedSDK.init(lookerHost, authUrl)
            LookerEmbedSDK.createDashboardWithId(id)
                .withNext()
                .appendTo(el)
                // 添加Tile点击事件监听
                .on("dashboard:tile:click", handleTileClick)
                // 保留并扩展钻取点击事件
                .on("drillmenu:click", handleDrillClick)
                // 原有事件监听
                .on("look:ready", ()=> console.log("报表加载完成"))
                .on("dashboard:run:start", ()=>console.log("仪表盘开始加载"))
                .build()
                .connect()
                .catch((error) => {
                    console.error("嵌入连接失败：", error)
                    setError?.(error.message)
                })
        }
    }, [id, setError])

  return <>
    <style jsx>{`
      :global(.container-dashboard) {
        width: 100%;
        height: 95vh;
      }
      :global(.container-dashboard > iframe) {
         width: 100%;
         height: 100%;
      }
    `}</style>
      <div className="container-dashboard" ref={embedCtrRef} />
  </>
}

方式二：监听全局postMessage事件（捕获所有交互） #

如果需要捕获更全面的iframe内操作，可直接监听父页面的message事件——Looker嵌入实例会通过postMessage向父页面发送所有事件：

// 在组件内添加全局消息监听
useEffect(() => {
    const handleLookerMessage = (event: MessageEvent) => {
        // 验证消息来源为你的Looker域名，防止恶意跨域消息
        if (event.origin !== process.env.NEXT_PUBLIC_LOOKER_HOST) return

        // 过滤出所有点击类事件
        if (event.data?.type?.includes("click")) {
            console.log("Looker内点击事件详情：", event.data)
            // 执行自定义业务逻辑
        }
    }

    window.addEventListener("message", handleLookerMessage)
    // 组件卸载时移除监听
    return () => window.removeEventListener("message", handleLookerMessage)
}, [])

关键注意事项 #

1. SDK初始化正确性：LookerEmbedSDK.init的第一个参数必须是你的Looker实例完整域名（如https://your-looker-instance.com），不能填"..."，否则事件通信会失败。
2. 跨域配置：服务端生成SSO URL时，embed_url中的embed_domain必须和父页面域名完全匹配（生产环境不能用localhost），否则浏览器会拦截postMessage。
3. 权限配置：确保服务端生成SSO时，给用户分配了embed_browse_spaces等必要权限，否则部分事件可能无法触发。

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