Tableau Embed링크를 iframe으로 적용시 CORS 때문에 곧바로 적용이 되지 않는다.
Retool에서 Tableau Embed 하는 방법은 아래 두가지.
1. Tableau 자체를 임베딩.
2. iframe을 통해 임베딩.
보통은 1번으로 하는게 맞지만, 로그인한 유저마다 다르게 대시보드를 보게하려면 2번 방식으로 해야한다.
1번 방식은 태블로 URL을 넣으면 바로 적용된다. (Easy)
2번 방식은 동일하게 그냥 넣으면 적용되지 않는다.
약간의 트릭이 필요한데, 더미 웹페이지를 서버를 하나 만들고 거기에 임베딩을 하면 성공한다.
retool_embed.html을 만들고 코드를 적용하낟.
그리고 신기한게도 리툴에서 로컬호스트 서버를 인식해서 보여준다.
http://127.0.0.1:5501/retool_embed.html를 iframe에 적용하면 다음과 같이 잘나옴.
추가로 옵션에 Storage and Cookies를 반드시 체크해야한다. 이것을 체크하지 않으면 태블로가 무한로딩이 된다. 이걸 몰라서 꽤 오랫동안 고생했음
아래는 챗지피티가 짜준 retool_embed.html 코드.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau Public 대시보드 임베딩</title>
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>
</head>
<body>
<h1>Tableau Public 대시보드</h1>
<p>아래는 <code>tableau-viz</code>를 사용하여 Tableau 대시보드를 임베드한 예제입니다:</p>
<!-- tableau-viz 요소가 삽입될 컨테이너 -->
<div id="vizContainer"></div>
<script type="module">
// tableau-viz 요소 생성
const tableauViz = document.createElement('tableau-viz');
tableauViz.id = 'tableauViz';
tableauViz.setAttribute('src', "https://public.tableau.com/views/getData_Demo/getData_Demo?:language=en-US&:display_count=n&:origin=viz_share_link");
// 컨테이너에 tableau-viz 추가
const container = document.getElementById("vizContainer");
container.appendChild(tableauViz);
</script>
</body>
</html>reference
- Tableau Embeding API v3 https://help.tableau.com/current/api/embedding_api/en-us/index.html
성장한 데이터분석가