디마에) 17일차
화이자를 맞아따. 팔이 잘 올라가지지 않는다.
북마크&알아야하는 웹사이트 )
https://ga-dev-tools.web.app/campaign-url-builder/
GTM 숴어어어어업 by아론
=●구글태그매니저
-> 직접 어려운 코딩을 하지 않아도 단 몇번의 클릭으로, 그로부터 얻을 수 있는 기능을 쓸 수 있게 해준다!
우리는 각 코드마다 충돌을 방지하기 위해 따로 각방을 쓰게 해주었다.
●이것 관련 면접질문일 수도 있는 것
GTM어떻게 설치하는지 아러여? -> 정말 너가 아냐/개발자와의 소통이 가능한지 보기위해
: 넵! 드래그, 복사한 뒤 헤드/바디 밑에 붙여넣으면 됨니다
근데 이 태그가 뭐라구?
●GA태그의 역할
: 방문데이터가 발생하면, 내 GA로 데이터를 보내줘! !
고럼 이제 그 '태그'를 직접 만들어보자
●저 맨 처음 태그구성에서 설정하는 것은?
: 태그유형/추적유형/구글애널리틱스설정
이게 모냐고?
추적유형: '어떤' 데이터를 보낼건지
애널리틱스설정: '내' GA로 그 데이터가 와주기위해 주소를 지정하는 것!
'모든'
페이지뷰가 발생하면,
나의 구글애널리틱스에다가 보내줘엉!
●실습!
"티스토리에서 저 돋보기를 눌렀을 때, 내 GA로 데이터를 보내줘." 란 태그를 입력해보기!
'클릭'은 추적유형 중 /이벤트/에 해당!!
그리고 카테고리와 작업을 이름붙여줘
작업=해당액션
이름은 자유롭게 붙이되, 직관적이기만하면 돼!
그래야 저 이름으로 GA가 들어오므로 꼭 저 2개는 지정을 해줘야함
글고 구글애널리틱스설정에서 ' 내 GA'로 보내달라고 누른뒤,
그럼 요로케~ 저장되고~ 이제 밑의 트리거!
여기까지는 뭐해준거냐면
이벤트가 발생하면 타이틀_버튼/클릭 이라는 이름으로 내 GA에 데이터를 보내줘
그니까 '어떤'이벤트인지는 아직 정해주지 않은 상태인겨!
트리거는 요런 식으로 선택하게 나오는데,
여기서 클릭 중
링크만 / 모든요소가 있어
어떻게 다를까?
링크만 → 그걸 '클릭'해서 위의 링크주소가 바뀔 시!
모든요소 → 그게 아닐 시!
티스토리에서 돋보기를 눌러보니까, 화면의 요소만 바뀌고 위의 링크자체는 바뀌지않아.
그래서 요거를 클릭해주고,
그 다음 저 '클릭클래시스'를 선택해줄거야 (이유는 곧 나옴)
그럼 저기다 '어떤 걸' 클릭해야하는지 알려줘야하자나! 그래서 저 돋보기의 주소가 필요해 나는
>> 이제 티스토리로 가서
CTRL +쉬프트 + I
누르면 창이 쫘라라 뜨는데
거기서 저 동그라미 쳐진 걸 누르고, 원하는 거에 갖다대면 저러케 파란줄로 그걸 알려준다!
저기서 우리가 알 수 있는 게 class밖에 없지! 고래서 저 따옴표안에 든
btn_search 를 복사해! ! !
(=클릭클래시스로 설정했던 이유. 대부분 많이 쓴다
일단 클릭클래시스를 누르고 해당코드를 찾았는데 클래스코드가 없을시 다른걸 누르면 돼!)
고러면 요렇게 설정이 되는데 이건
↑요 말과 같아
이제 트리거를 나오면 태그전체설정이 이렇게 되는데
= 트리거에서 '저 조건'이 발생하면(이벤트), 내 GA로 데이터를 보내줘
와 같아!
즉 정리하면
지정해주는 것
비틀리
태그매니저에선 원하는 이름대로 행동데이터를 받아보는 것
비틀리는 원하는 이름대로 방문데이터(=획득데이터)를 받아보는 것
=즉 /우리웹사이트,서비스/등에 어떻게 들어오게 되었는지에 대한 힌트를 알 수 있는 것!
고객여정에 따르면 참고해야하는 것은 비틀리-태그매니저 순이다.
둘 다 쓸 줄 알아야!
실무에서 가장 많이 쓰일 창 !!! 기억★
밑에 요거는 반드시 체크를 풀어주세요
목업수업 by 재경
목업이란
시제품 생산 전 샘플을 만들 때 쓰는 틀?구조라 보면 돼
목업이미지를 활용해 할 수 있는 것들이 많아!
ex) 내 포폴을 핸드폰화면에 합성해서 있어보이게 보여주는 등 ↓
●목업포토샵파일(psd)를 받아서, 열어보면 보통 이런 형식일거시다!
그럼 조기 유어 디자인이라 써있는 레이어!
의 '네모' 부분을 더블클릭해서 그 안에 있던 레이어로 접속(?)하자
디지몬 디지털세상같음 ,.,.
먼가 새로운게 또 열림
뭐 어쩌구뜨면은 응응 레이어유지 누르면 된다
그러면, 호오 요런 새로운 창이 열린다 ! ! ! ! !!
여기다가 요러케 뭔갈 해주고오~~~
저장 (컨트롤 + S) 하고나면,
원래 첫번째 레이어로 돌아가부자
허어어어어어엉어어어어어얼 ~ ! ! ! ! ! ! !
이제 저기다 뭐 내 사진을 합성해두 되고 고런거쥐 !
●목업파일을 불러왔는데 아무것도 안보인다해서 당황치마 !!!
목업이미지의 약간 귀여운 특징(?) 관행(?)인가봐
저기 딜리트디스를 삭제해주거나 눈알을 꺼준다
고러면 이렇게 이미지가 나타남 ㅋㅋㅋㄷㄱㅋㄱㅋㅋㅋ
쉽게 내어주진 않는군아 ^^ ,, ., .,
레이어에서 하란대로 고대로,..해주면 된다
그러고나서 유어디자인히어에 똑같이 들어가서 편집해주구 저장하면,
ㅋㅋㅋㄱㅋㅋ빌딩주 참 쉽쥬 ~ ~ ^0^
●컴퓨터상에선 더 어둡게 나와지는 사진을 편집하기
**원본을 갖고 편집/어쩌구 할 땐 꼬옥 복사본을 맨들어놔~~ !
방법1) 레벨
저기서 레벨선택!!!
요론 창이 뜰텐데 저 3등분을 기점으로 맨 먼저가
어두움/ 회색 / 흰색 영역이야
팁은 맨 오른쪽 끝의 흰색 영역 세모를, 나타나는 그래프끝에 맞춰주면 쉬워!
방법2) 곡선
요기서 S자로 요리조리하는 것도 많이 쓰심!
●전체말고 부분만 밝게하고파!! 할때
닷쥐도구 클릭!!!
***밝기는 다른 편집이 다 끝나고 난 후 마지막에 꼭 해주짜 ! !! !
요리다하고 넣는 참깨고명같은 존재
●어제배웠던 도장도구의 활용
촬영을 잘못 찍었어도,
요러케 배경을 꺠끗히 맨들어줄 수 있지롱
●일대일비율로 만들기
사진을 1처럼 요렇게 찍었는데, 인스타광고를 돌려야해. 근데 저거는 사진이 짤릴테니까 안되잖아.
일대일비율용 사진으로 편집을 해부자
저걸 누르면
요러케 뜨는데 새로만들어준 창을 클릭하면 거기에 고대로 복사되져!
(혹은 바로 밑에있는 새로만들기해도 되겠다)
요렇게
쉬프트누른 채 쫘르르 다 선택해주구, 우클릭해서 레이어병합을 해 줭
이제 합쳐졌으니 도장도구로, 칸마다 경계를 사알살살 문질러주기 !!!