뷰저블을 이용하시는 분들이라면, 한번쯤은 링크나 버튼의 기준이 되는 셀렉터의 중요성을 느끼셨을 것이라고 생각됩니다!

데이터를 올바르게 수집하기 위하여, 내가 분석하고자 하는 페이지의 링크 버튼에 대해서

"뷰저블의 셀렉터"가 변하고 있지 않은지 확인할 수 있는 방법을 공유합니다!

Step 1. 페이지에 뷰저블셀렉터 확인 기능 추가하기

먼저, 뷰저블 쿼리셀렉터를 확인하기 위하여 개발자 도구를 통하여 콘솔창에 아래 코드를 입력합니다.

1) 쿼리셀렉터값을 확인할 url로 이동 후, 개발자 도구를 연다.

(Window OS: f12 / Mac OS : option+command+i)

2) Console 창으로 이동 후, 아래의 코드를 복사+붙여넣기 후 Enter를 입력한다.

Enter 입력 후, undefined가 뜨는 것은 정상입니다! :)

<뷰저블 쿼리셀렉터 확인을 위한 설치 코드>

var _getQuerySelector = function(elem, reduced) {

var names = [];

var done = false;

var selector = null;

if(typeof reduced == 'undefined') reduced = false;

var el = elem;

while (el.parentNode){

var pTagName = el.parentNode.tagName;

if(pTagName =='A'

|| pTagName =='AREA'

|| pTagName =='SELECT'

|| pTagName =='INPUT'

|| pTagName =='BUTTON' ){

if(!elem['__parentNode__']){

elem['__parentNode__'] = el.parentNode;

}

}

if (el.id && !done){

names.unshift(el.tagName +'#'+el.id);

// break;

done = true;

} /*else if(el.getAttribute('class')) {

if(el.tagName != 'HTML' && el.tagName != 'BODY'){

var classlist = el.getAttribute('class').split(' ');

var class_name = el.tagName;

for(var i= 0,iLen=classlist.length;i<iLen;i++){

var class_sub = classlist[i].replace(/(^\s*)|(\s*$)/gi, "");

if(class_sub != ''){

if(i == 0){

class_name += '.'+class_sub;

} else {

if(class_sub && class_sub != ' ')

class_name += '.' + class_sub;

}

}

}

//names.unshift(class_name);

for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);

names.unshift(class_name + ":nth-child("+c+")");

} else {

names.unshift(el.tagName);

}

}*/ else if(!done){

if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);

else{

for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);

if(reduced) {

names.unshift(el.tagName +"("+c+")");

} else {

names.unshift(el.tagName +":nth-child("+c+")");

}

}

}

el=el.parentNode;

}

if(reduced) {

selector = "~" + names.join("|");

} else {

selector = names.join(" > ");

}

return selector;

}

Step 2. 뷰저블 쿼리셀렉터 값을 확인할 요소의 쿼리값 확인하기

뷰저블 쿼리셀렉터를 확인할 요소의 쿼리값을 찾아 복사해둡니다.

1) Elements 탭으로 이동하여, 원하는 요소를 찾는다.

예시로 뷰저블의 Dashboard 이동버튼을 찾아보면, 다음과 같습니다.

2) 해당 요소를 우클릭하여 셀렉터 값을 복사합니다.

요소 우클릭 > Copy > Copy selector

> 확인된 값
#navigation > ul.usermenu > li:nth-child(1) > a

3) 확인한 쿼리값으로 뷰저블 쿼리셀렉터 확인하기

2.에서 확인한 쿼리값을 아래 코드에 붙여넣어 뷰저블 쿼리셀렉터를 확인합니다.

3-1) 2. 에서 확인한 쿼리값을 아래 코드의 @쿼리셀렉터 위치에 붙여넣기 합니다.

'' 이 따옴표 안의 @쿼리셀렉터만 지우고 쿼리값을 넣어 주시면 됩니다.

<뷰저블 쿼리셀렉터 확인용 코드>

_getQuerySelector(document.querySelector('@쿼리셀렉터'), false)

2. 에서 확인한 값을 대입하면 다음과 같습니다.

_getQuerySelector(document.querySelector('#navigation > ul.usermenu > li:nth-child(1) > a'), false)

3-2) 쿼리값을 대입한 코드를 Console창에 붙여넣기 후 Enter를 입력합니다.

다음과 같이 뷰저블 쿼리셀렉터 값을 확인할 수 있습니다.

기존 쿼리값 : #navigation > ul.usermenu > li:nth-child(1) > a

뷰저블 쿼리셀렉터값 : 'NAV#navigation > UL:nth-child(2) > LI:nth-child(1) > A:nth-child(1)'

위에서 확인한 뷰저블 고유의 쿼리셀렉터값이 변한다면,

해당 요소의 요소명/순차/id속성 값 등이 변하고 있는 것을 의미합니다.

뷰저블은 뷰저블 쿼리셀렉터를 기반으로 데이터를 누적하기 때문에, 이 값이 변한다면

제대로 분석 데이터를 확인하기 어려우니 참고 부탁드립니다. :)

뷰저블 링크/버튼 기준이 되는 "뷰저블셀렉터" 확인하는 방법

뷰저블 링크/버튼 기준이 되는 "뷰저블셀렉터" 확인하는 방법