looker studio 에서 react 로 연결 및 url param으로 필터 제어

looker studio에서 만든 테이블을 react로 옮겨야 할 일이 발생하였다.

내가 해결한 내용을 정리해본다

looker studio 에서 share 옆 화살표 를 클릭하여 Embed report 를 사용하면 iframe 태그로 준다.

이를 가져다 사용하면 되지만 처음에는 접근 제한으로 테이블이 보이지 않는다

다시 Share 를 클릭하는데 화살표 말고 Share 버튼을 누르면 창이 하나뜨는데
아래에서 Link Settings에서 Public으로 수정해주면 전체 접근이 가능하다

필터 제어 하기

필터를 제작하였지만 리액트에서 제어하고 싶을 경우 url 파람으로 필터를 조절 할수 있다

관련 공식 문서가 있었다 아래는 관련 공식문서 주소이다
공식문서 : https://developers.google.com/looker-studio/connector/data-source-parameters?hl=ko#set_url_parameters

알아야 할 내용

파라미터 이름 , report_id , page_id

report_id , page_id

기본 url을 사용하기 위해서 모양은 이렇게 생겼는데 이때 report_id , page_id 가 필요하다

"https://lookerstudio.google.com/reporting/<report_id>/page/<page_id>"

이를 알기는 쉬운데 iframe으로 가져올때 src부분을 보면 report_id, page_id 가 채워져 있으니 그냥 사용하면 된다

파라미터 이름

단순히 내가 파라미터를 만들때 만든 이름이라고 생각하고 사용하려고 했지만 전혀 다른게 필요하다
공식문서에 나오는데 이름이 다르게 설정되어 있다
이를 확인 하기 위해서는 루커 스튜디오 의 메뉴 부분에 resource에 보면 된다

parameters라고 있는데 접근하면

공식문서 이미지와 같은 게 보인다 이미지 출처 : 공식문서

저기서 name이 url 파라미터로 접근할수 있는 이름이다 .

단순히 이제 이름을 알았으니 바로 사용하는 것이 아니고 url에 맞춰서 값들을 수정해줘야 한다

값들은 객체로 받는다

{
  "parameterName": parameterValue
}

파라미터 이름 부분에 우리가 알아온 이름을 작성하고 객체 값으로 사용하고 싶은 값을 넣는다

var params = {
  "ds0.zipcode": "94094"
};
var paramsAsString = JSON.stringify(params);
var encodedParams = encodeURIComponent(paramsAsString)

공식문서의 예시를 가져왔다 값을 넣고 url에 맞게 인코딩 해주고 앞에서 준비한 주소에

쿼리 파라미터로 작성해주면 된다

?params= 

적용 완료