이벤트란 광고 또는 HTML 문서에서 액션을 어떻게 설정하여 사용자 동작, 타임라인 키프레임 등의 상황에 대응하도록 하는지를 의미합니다. 예를 들어 광고의 터치 이벤트를 사용하여 애니메이션 시작을 트리거할 수도 있고 이벤트 마커를 설정한 타임라인 지점에서 CSS 변경을 트리거할 수도 있습니다.
이벤트 대화상자
이벤트 대화상자에서 객체 및 작업을 이벤트에 연결할 수 있습니다. 이벤트 대화상자는 이벤트 설정 과정을 안내해 주는 양방향 대화상자입니다.
- 타겟: 버튼과 같이, 이벤트를 트리거하는 객체를 선택합니다.
- 이벤트: 감지할 이벤트(예: 사용자의 버튼 클릭)를 선택합니다.
- 작업: 결과적으로 발생하는 작업(예: 동영상 재생)을 지정합니다.
- 수신자: 작업을 수행하는 요소(예: 동영상)를 선택합니다.
- 구성: 일부 작업의 경우 추가 세부정보가 필요할 수 있습니다.
이벤트 대화상자를 사용하여 이벤트를 정의하는 방법을 알아보세요.
이벤트 대화상자에 원하는 작업이 등록되지 않은 경우 자체적인 자바스크립트 함수를 만들어 맞춤 작업으로 활용할 수 있습니다. 하지만 이 기능은 AMPHTML 광고에 사용할 수 없습니다.
이벤트 패널
이벤트 패널에는 프로젝트의 이벤트가 나열됩니다. (이벤트 패널이 보이지 않으면 창 메뉴에서 열 수 있습니다.)
이벤트를 추가하는 방법:
- 패널 하단에서 이벤트 추가
버튼을 클릭합니다.
버튼을 클릭합니다.이벤트를 수정하는 방법:
- 이벤트 패널에서 이벤트를 더블클릭하여 이벤트 대화상자를 열고 변경합니다.
- 이벤트를 마우스 오른쪽 버튼으로 클릭한 다음, 팝업 메뉴에서 수정을 클릭하는 방법도 있습니다.
이벤트를 삭제하는 방법:
- 패널에서 이벤트를 클릭한 다음, 패널 하단에 있는 삭제
버튼을 클릭합니다.
- 이벤트를 마우스 오른쪽 버튼으로 클릭한 다음, 팝업 메뉴에서 삭제를 클릭하는 방법도 있습니다.
- 여러 이벤트를 삭제하려면 패널에서 이벤트를 선택한 다음, 위의 방법 중 하나를 사용합니다.
이벤트 목록을 필터링하는 방법:
- 현재 페이지 또는 선택한 항목에 대한 이벤트만 나열하려면 패널 상단의 드롭다운을 사용합니다.
- 이벤트 필터링 필드에 요소 ID, 이벤트 유형 또는 작업을 입력할 수도 있습니다.
이벤트의 타겟을 선택하는 방법:
- 이벤트를 마우스 오른쪽 버튼으로 클릭한 다음, 팝업 메뉴에서 타겟 선택을 클릭합니다.
- 타겟이 숨겨졌거나 잠긴 경우(또는 숨겨졌거나 잠긴 상위 요소가 있는 경우) 팝업 메뉴에 타겟 표시 및 선택 또는 타겟 잠금 해제 및 선택 옵션이 표시됩니다.
이벤트의 수신자를 선택하는 방법:
- 이벤트를 마우스 오른쪽 버튼으로 클릭한 다음, 팝업 메뉴에서 수신자 선택을 클릭합니다.
- 수신자가 숨겨졌거나 잠긴 경우(또는 숨겨졌거나 잠긴 상위 요소가 있는 경우) 팝업 메뉴에 수신자 표시 및 선택 또는 수신자 잠금 해제 및 선택 옵션이 표시됩니다.
이벤트 패널에서 요소 선택
- 다른 페이지에서 타겟 또는 수신자를 선택하면 스테이지가 해당 페이지로 전환됩니다.
- 여러 타겟 또는 수신자를 동시에 선택할 수 없습니다.
이벤트 미리보기
Google Web Designer 인터페이스 내에서는 이벤트를 미리 볼 수 없습니다. 이벤트가 작동하는 모습을 보려면 브라우저에서 프로젝트를 미리 보고 이벤트를 트리거합니다.