Javascript SDK Integration

๋ถ„์„ ์‹œ์Šคํ…œ์˜ ํ•ต์‹ฌ ๊ตฌ์„ฑ์š”์†Œ์ธ SDK๋Š” ์›น์‚ฌ์ดํŠธ ์• ๋„๋ฆฌํ‹ฑ์Šค์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ํฌ์ธํŠธ๋ฅผ ํ™•๋ณดํ•˜๋Š” ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์ธก์ •์„ ์œ„ํ•ด ๋ณธ ๋ฌธ์„œ์˜ ์•ˆ๋‚ด์— ๋”ฐ๋ผ Javascript SDK๋ฅผ ์›น์‚ฌ์ดํŠธ์— ์—ฐ๋™ํ•˜์—ฌ ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

1. ํ•„์ˆ˜ ์„ค์ •

ํ•„์ˆ˜ ์„ค์ •์ด๋ž€ SDK๊ฐ€ ๋™์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฐ˜๋“œ์‹œ ์›น์‚ฌ์ดํŠธ์— ์ถ”๊ฐ€๋˜์–ด์•ผ ํ•˜๋Š” ์„ค์ •์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ํ•„์ˆ˜ ์„ค์ •์„ ์ ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๋ฐฉ๋ฌธ, ํŽ˜์ด์ง€๋ทฐ, ์‚ฌ์šฉ์ž์˜ ํ™˜๊ฒฝ ์ •๋ณด ๋“ฑ์„ ์ธก์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

SDK ์ถ”๊ฐ€

์›น์‚ฌ์ดํŠธ SDK๋Š” ์ผ๋ฐ˜์ ์ธ ์›น์‚ฌ์ดํŠธ์— ์ ์šฉํ•˜๋Š” "Javascript ํƒ€์ž…"๊ณผ "JSX ๋ชจ๋“ˆ ํƒ€์ž…" 2๊ฐ€์ง€๋กœ ์ œ๊ณต๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ„์„ํ•˜๊ณ ์ž ํ•˜๋Š” ์›น์‚ฌ์ดํŠธ์˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ์ ํ•ฉํ•œ SDK ํƒ€์ž…์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํƒ€์ž…์— ๋งž๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Javascript, jQuery ๋“ฑ์œผ๋กœ ๊ฐœ๋ฐœ๋œ ์›น์‚ฌ์ดํŠธ์ธ ๊ฒฝ์šฐ

์•„๋ž˜์˜ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œํ•œ ํ›„, ์••์ถ•์„ ํ•ด์ œํ•˜์—ฌ ๊ฐœ๋ฐœ์ฝ”๋“œ๊ฐ€ ์ €์žฅ๋œ ๊ฒฝ๋กœ์— ์œ„์น˜์‹œํ‚ค๋ฉด ๋ฉ๋‹ˆ๋‹ค.

React.js ๋“ฑ JSX๋กœ ๊ฐœ๋ฐœ๋œ ์›น์‚ฌ์ดํŠธ์ธ ๊ฒฝ์šฐ

์•„๋ž˜์™€ ๊ฐ™์ด npm ์˜์กด์„ฑ ์„ค์น˜๋ฅผ ํ†ตํ•ด SDK ๋ชจ๋“ˆ์„ ๊ฐœ๋ฐœ์ฝ”๋“œ์— import ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

npm i dop-website-sdk

SDK ์ดˆ๊ธฐํ™”

SDK ์ดˆ๊ธฐํ™”(Initialization)๋Š” SDK๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „ ๋ฐ˜๋“œ์‹œ ๋จผ์ € ์‹คํ–‰๋˜์–ด์•ผ ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ด๋Š” SDK๋ฅผ ์›น์‚ฌ์ดํŠธ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ฝ”๋“œ ๋™์ž‘์„ ์›นํŽ˜์ด์ง€์˜ ํ—ค๋”์— ์œ„์น˜ ์‹œํ‚ด์œผ๋กœ์จ, ์›น์‚ฌ์ดํŠธ๊ฐ€ SDK์—์„œ ์ œ๊ณตํ•˜๋Š” API๋ฅผ ๋ฏธ๋ฆฌ ์ธ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ ํ™•์ธ

SDK ์ดˆ๊ธฐํ™” ์ฝ”๋“œ๋Š” ์™€์ด์ฆˆํŠธ๋ž˜์ปค ์‹œ์Šคํ…œ์— ๋กœ๊ทธ์ธ ํ•˜์‹  ํ›„, ์•„๋ž˜์˜ ๋ฉ”๋‰ด์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ ์ ์šฉ

Javascript, jQuery ๋“ฑ์œผ๋กœ ๊ฐœ๋ฐœ๋œ ์›น์‚ฌ์ดํŠธ์ผ ๊ฒฝ์šฐ

  1. index.html์˜ <head> ํƒœ๊ทธ ์•ˆ์— SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

    ์ด๋ฅผ ์œ„ํ•ด, ๋จผ์ € ์œ„์—์„œ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•˜๋˜ SDK ํŒŒ์ผ(dop-website-sdk.js)์— ๋Œ€ํ•œ ๊ฒฝ๋กœ๋ฅผ <script> ํƒœ๊ทธ์˜ src ์†์„ฑ์— ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

  2. ์™€์ด์ฆˆํŠธ๋ž˜์ปค ์‹œ์Šคํ…œ์˜ [์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ค์ •] ๋ฉ”๋‰ด์—์„œ ๋ณต์‚ฌํ•œ SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค๋ฅธ <script> ํƒœ๊ทธ์— ์ถ”๊ฐ€ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

React.js ๋“ฑ JSX๋กœ ๊ฐœ๋ฐœ๋œ ์›น์‚ฌ์ดํŠธ์ผ ๊ฒฝ์šฐ

  1. App.js ์ปดํฌ๋„ŒํŠธ์— SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด, ๋จผ์ € ์œ„์—์„œ npm -i ๋ช…๋ น์„ ํ†ตํ•ด ์„ค์น˜ํ–ˆ๋˜ SDK์— WDOTInitialization ์†์„ฑ์„ ์ปดํฌ๋„ŒํŠธ๋กœ import ํ•ฉ๋‹ˆ๋‹ค.

  2. ์™€์ด์ฆˆํŠธ๋ž˜์ปค์Šค์˜ [์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ค์ •] ๋ฉ”๋‰ด์—์„œ ๋ณต์‚ฌํ•œ SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ๋ฅผ useEffect ์•ˆ์— ์ž‘์„ฑํ•˜๋˜, ๋‘๋ฒˆ์งธ ์ธ์ž๋Š” ๋นˆ๋ฐฐ์—ด([])๋กœ ๋‘์–ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ Œ๋”๋ง์— ๊ณตํ†ต์ ์œผ๋กœ ์ ์šฉ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

  3. ๋งŒ์•ฝ ํด๋ž˜์Šคํ˜• React.js๋กœ ๊ฐœ๋ฐœ๋œ ์›น์‚ฌ์ดํŠธ๋ผ๋ฉด, LifeCycle ํ•จ์ˆ˜์ธ componentDidMount ์•ˆ์— SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>
<head>
    ...
    
    <!-- Wisetracker SDK ์ดˆ๊ธฐํ™” ์Šคํฌ๋ฆฝํŠธ -->
    <script src="./dop-website-sdk.js"></script>
    <script type="text/javascript">  
        WDOTInitialization.setConfig({
            serviceNumber: {service number},
            dotAccessToken:"Wisetracker access token string",
            combackUserLimitDays:14,
            dotEndPoint:"The endpoint of data receiving",
            adClkEndPoint:"The endpoint of data receiving",
            includeUrl:"Regular expression of analysis websites",
            excludeUrl:"",
            referrerExpire:7, 
            firstEventSendMode : false,
            isSPA: true
        });
        WDOTInitialization.init();
    </script>
    ...

Last updated