맞춤 액션 만들기

 

자바스크립트를 사용하여 맞춤 작업을 만들 수 있습니다. 맞춤 작업을 정의하고 나면 문서 내에서 재사용할 수 있습니다.

맞춤 작업을 만드는 방법:

1. 이벤트 패널 하단의 이벤트 추가 버튼을 클릭하여 새 이벤트를 추가합니다.
2. 타겟과 이벤트를 선택합니다.
3. 작업은 맞춤 > 맞춤 작업 추가를 선택합니다. Google Web Designer에 맞춤 코드를 입력하라는 메시지가 나타납니다.
   
4. 코드 상자 위 입력란(gwd. 접두사 뒤)에 작업의 이름을 입력합니다.
   • 각 맞춤 작업의 이름은 문서 내에서 고유해야 합니다.
   • 이름에는 내용을 알 수 있을 정도의 설명이 있어야 합니다.
   • 잘못된 이름(예: 공백이 들어간 이름)을 입력하면 입력란에 빨간색으로 밑줄이 그어집니다.
5. 코드 상자에 기능을 정의합니다. 각 구성요소에 사용할 수 있는 속성, 이벤트 및 메소드의 목록은 구성요소 API를 참조하세요.
6. 확인을 클릭합니다.

이벤트가 맞춤 작업을 사용하도록 구성되었습니다. 이 작업은 이제 맞춤 아래에 나열된 다른 이벤트에도 사용할 수 있습니다.

오른쪽 하단 모서리를 드래그하여 대화상자의 크기를 조절할 수 있습니다.

예제

맞춤 액션을 Google Web Designer의 기능을 확장하는 구성요소와 함께 사용할 수 있습니다. 아래에 있는 모든 예제는 document.getElementById 메소드를 사용하여 액션이 적용되는 문서 내의 요소를 지정합니다.

동영상이 재생될 때마다 음소거 해제하기

다음 이벤트를 추가합니다.

타겟	gwd-video_1(또는 동영상 ID)
이벤트	동영상 > 일시중지 후 재생
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

이 코드를 사용하는 방법:

• gwd-video_1을 동영상 ID로 바꿉니다.

스와이프할 수 있는 갤러리의 각 프레임에 캡션 표시하기

다음 이벤트를 추가합니다.

타겟	gwd-swipegallery_1(또는 스와이프할 수 있는 갤러리의 ID)
이벤트	스와이프할 수 있는 갤러리 > 프레임이 표시됨
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

이 코드를 사용하는 방법:

• gwd-swipegallery_1을 스와이프할 수 있는 갤러리의 ID로 바꿉니다.
• caption-div를 캡션을 표시하는 텍스트 요소의 ID로 바꿉니다.
• 맞춤 코드의 각 프레임에 대한 캡션 텍스트를 바꿉니다.

2초간 일시중지 후에 광고의 다음 페이지로 이동하기

다음 이벤트를 추가합니다.

타겟	page1(또는 시작 페이지의 ID)
이벤트	페이지 > 페이지 표시 준비 완료
작업	맞춤 > 맞춤 작업 추가
맞춤 코드	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

이 코드를 사용하는 방법:

• page1을 시작 페이지의 ID로 바꿉니다.