[프론트엔드] React Project - GA API 개발

1. GA4/UA 태그 API 신규 개발 배경

 

구글 GA 태그에 대한 API 신규개발 내용울 정리하여 기술한다.

 

GA태그는 NodeJs header 부분에서 호출하고 있는데 실제로 push 하는 클릭 태그를 변경해야하는 작업이 생겼다.

 

클릭 태그는 프로젝트(도메인)마다 공통으로 삽입되어있어서 프로젝트마다 태그를 수정 해야한다.

요청사항은 클릭태그 가상의 카테고리 -> 실제 카테고리 ID로 변경해달라는 내용이였다.

 

해당 카테고리를 수정하기 위헤서는 나중을 위해서도 GA 전용 API를 개발하고 REACT에 적용할 필요가 있었다.

 

GA태그 API 백엔드 개발자와 협업하여 필요한 데이터를 제공받아서 REACT에서 호출하는 부분을 만들었다. 

API는 백엔드는 개발자와 협업하여 생성 후 REACT에서  APi를 호출하도록 하였다.

 

 

2. REACT에서 Function 사용

 

이벤트 Function 함수 호출

 

    const itemListItemClick = (item) => {
        if (domain === 'shopping' || domain === 'pc') {

            if (lists.itemList?.items?.length > 0) {
                // ga4_clickItem({ item, list_name: domain + '.list' })
                // ua_clickItem({ item, list_name: domain + '.list' })

                // GA API 호출
                googleTagApi(item.item_id).then((value) => {

                    // console.log(value);

                    if (value?.data?.success === true) {

                        const tag_item = value.data.result

                        ga4_clickItem({ item, tag_item, list_name: domain + '.list' })
                        ua_clickItem({ item, tag_item, list_name: domain + '.list' })
                    } else {
                        console.log('통신 오류')
                        return false;
                    }
                })
            }
        }
    }

 

함수는 javascript 클릭 이벤트를 통해서 상품을 클릭할 경우 위처럼 함수를 호출한다.

호출한 함수는 this의 상품 ID를 인수로 전달받아서 GA태그 API를 호출하는 로직이다.

 

위에서는 클릭 시 googleTagApi 함수를 상품의 id번호를 전달하여 호출한다.
해당 API는 promise 형태로 데이터가 떨어지는데 .then 메서드를 통해서 promise value값을 받아와야 한다.

 

 

3. REACT axios를 이용한 API 호출

import axios from 'axios'

/* SYC : GA 태그 API 호출
*  Request Type     : Int
*  Request prameter : 상품 ID
*  Return Type      : Json Object
*  Return prameter  : Real Category
*  Description      : 리얼 카테고리 호출
*/

export async function googleTagApi(item_id) {
  const url = `${process.env.REACT_APP_API_URL}/front/v3/ad/gaua4tag/?item_id=${item_id}`

  try {
    const result = await axios.get(url);
    return result;

  } catch (error) {
    console.log(error);
  }
}

위에는 googleTagApi  Function을 통해서 실제로 호출되는 부분이다.

axios 라이브러리를 사용하여 쉽게 API를 http통신으로 호출 할 수 있다.

async await는 이때 개발자가 원하는시점에 API를 호출하도록 Promise를 쉽게 컨트롤이 가능하다.

async를 function을 선언하고 API 호출 부분앞에 await를 붙여 원하는 시점에 결과를 멈추도록 예약하는 기능이다.
해당 기능을 사용하면 조금 더 유연한 개발이 가능하고 비동기로 동작되는 자바스크립트에서는 동기처리를 위해 필수로 사용되는 기능이다.

자세한 문법은 아래를 참고하도록 하자. 

 

(JS) 비동기를 동기처럼 다루기 : async & await