Google Ads의 동적 광고에서 갤러리 내에 여러 항목 표시하기

이 페이지에서는 갤러리를 사용하여 Google Ads 동적 피드의 항목을 표시하는 방법을 설명합니다. 갤러리에서는 자동으로 각 항목을 차례로 로드하며, 이탈 URL이 해당 항목과 관련된 웹페이지로 연결되도록 활성 상태인 항목을 추적합니다.

템플릿을 사용하는 경우

템플릿 갤러리의 Dynamic Remarketing for Google Ads 카테고리에서 템플릿을 사용하는 경우('Dynamic Remarketing Blank Slate' 템플릿 제외) 기본 레이아웃을 사용하는 한, 광고 소재에서 미리 추적을 구현합니다.

동적 요소를 추가하거나 'Dynamic Remarketing Blank Slate' 템플릿을 사용하여 처음부터 광고 소재를 디자인하는 경우 이 페이지의 안내를 따르세요.

1단계. 항목 그룹 설정하기

추적을 단순화하려면 단일 피드 항목에 대해 표시할 여러 요소(동일한 항목의 제목, 이미지, 가격 등)를 그룹화해야 합니다. 그룹을 사용하면 광고 소재에서 각 개별 요소와의 상호작용을 추적하는 대신, 그룹과의 상호작용을 추적할 수 있습니다.

단일 항목의 자리표시자 요소를 생성합니다. 예를 들어 항목 이름과 항목 이미지가 여기에 포함될 수 있습니다.
요소를 선택하고 선택한 요소를 마우스 오른쪽 버튼으로 클릭한 다음, 그룹 만들기...를 클릭하여 이러한 요소가 포함된 새 그룹을 생성합니다.
그룹 이름을 입력하고 확인을 클릭합니다.

그룹은 나중에 사용할 수 있도록 라이브러리에 자동으로 추가되지만, 아직은 스테이지에서 그룹 인스턴스를 삭제하지 마세요. 지금은 그룹 인스턴스를 옆으로 옮겨 놓으면 됩니다.

2단계. 갤러리에서 항목 표시하기

스와이프할 수 있는 갤러리 또는 회전 갤러리 구성요소를 사용하여 피드 항목을 표시할 수 있습니다.

갤러리를 스테이지에 추가합니다.
갤러리의 속성 패널에서 ID(예: gwd-swipegallery_1)를 설정합니다.
그룹 속성 입력란에 방금 전에 만든 그룹의 이름(예: Group1)을 입력합니다.

3단계. 동적 결합 추가하기

동적 데이터 결합을 사용하여 광고 소재 요소를 피드와 연결합니다.

동적 패널에서 동적 결합 추가 버튼을 클릭하여 동적 속성 대화상자를 엽니다.
데이터 스키마를 아직 선택하지 않은 경우 스키마를 선택합니다.
그룹 내의 각 요소에 대해 개별 요소의 속성을 해당 데이터 스키마 개체에 결합합니다.
갤러리 내에서 그룹에 대한 결합을 추가한 다음, 요소 속성 컬렉션의 각 항목에 대해 반복을 선택합니다. 데이터 스키마 개체를 데이터 스키마와 일치하는 최상위 항목(예: 소매업 또는 여행)으로 설정합니다.
확인을 클릭하여 저장합니다.

이제 스테이지에서 그룹 인스턴스를 삭제해도 됩니다.

4단계. 갤러리에 사용자 상호작용 이벤트 추가하기

광고 소재에서 활성 상태인 항목을 계속 추적할 수 있도록 모든 항목에 mouseover 및 mouseout 이벤트를 포함해야 합니다.

갤러리를 마우스 오른쪽 버튼으로 클릭한 다음, 이벤트 추가...를 선택하여 새 마우스 > mouseover 이벤트를 추가합니다.
맞춤 > gwd.itemMouseover 작업을 선택한 다음, 확인을 선택합니다.

갤러리에 다음과 같은 이벤트를 추가합니다. 갤러리를 대상으로 하는 총 5개의 이벤트가 있습니다.

이벤트	작업
마우스 > mouseover(이전 단계에서 추가됨)	맞춤 > gwd.ItemMouseover
마우스 > mouseout	맞춤 > gwd.ItemMouseout
마우스 > click	맞춤 > gwd.exitToItem
스와이프할 수 있는 갤러리 또는 회전 갤러리 > 프레임 활성화됨	맞춤 > gwd.galleryFrameActivated
스와이프할 수 있는 갤러리 또는 회전 갤러리 > 프레임 표시됨	맞춤 > gwd.galleryFrameShown

5단계. 코드 보기에서 수정하기

코드 보기로 전환하고 코드를 변경하여 갤러리의 기능을 동적 피드로 마무리합니다.

코드 보기에서 갤러리 요소에 중첩된 그룹 요소를 찾습니다. 클래스 js-item을(를) 그룹 요소에 추가합니다.

<gwd-swipegallery id="gwd-swipegallery_1" scaling="contain" pause-front-media="" resume-next-media="" class="gwd-swipegallery-19o0" groups="Group1">
  <div class="js-item" data-gwd-group="Group1" id="Group1_1" style="height: 100%; width: 100%;" bind-each-item="Product"></div>
</gwd-swipegallery>

계속하여 코드 보기에서 handleWebComponentsReady 함수를 찾습니다. // 문자를 삭제하여 common.setGallery 함수를 호출하는 줄에서 주석 처리를 삭제한 다음, swipegallery-items을(를) 갤러리의 ID(예: gwd-swipegallery_1)로 대체합니다.

/**
  * Handles the WebComponentsReady event. This event is fired when all
  * custom elements have been registered and upgraded.
  */
function handleWebComponentsReady(event) {
  // Start the Ad lifecycle.
  setTimeout(function() {
    // add reference to your swipegallery to access via custom JS, passing in its ID:
    //common.setGallery('swipegallery-items');

    gwdAd.initAd();
  }, 0);
}

그 외의 단계

아직 완료하지 않은 경우 동적 데이터 피드를 만드는 방법을 알아보세요.
샘플 데이터가 포함된 광고 소재를 미리 보고, 어떻게 표시되는지 확인하세요.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?