แสดงหลายรายการภายในแกลเลอรีในโฆษณาแบบไดนามิกสำหรับ Google Ads

หน้านี้จะอธิบายวิธีใช้แกลเลอรีเพื่อแสดงรายการจากฟีดแบบไดนามิกสำหรับ Google Ads แกลเลอรีจะโหลดทีละรายการโดยอัตโนมัติและติดตามรายการที่ใช้งานอยู่เพื่อให้ URL ทางออกชี้ไปยังหน้าเว็บสำหรับรายการนั้นๆ โดยเฉพาะ

การใช้เทมเพลต

หากคุณใช้เทมเพลตจากหมวดหมู่ Dynamic Remarketing for Google Ads ของแกลเลอรีเทมเพลต (ยกเว้นเทมเพลต "Dynamic Remarketing Blank Slate") ครีเอทีฟโฆษณาจะใช้การติดตามอยู่แล้วตราบใดที่คุณใช้เลย์เอาต์เริ่มต้น

ทำตามคำแนะนำในหน้านี้หากคุณเพิ่มองค์ประกอบแบบไดนามิกอื่นๆ หรือออกแบบครีเอทีฟโฆษณาตั้งแต่เริ่มต้นโดยใช้เทมเพลต "Dynamic Remarketing Blank Slate"

ขั้นตอนที่ 1 ตั้งค่ากลุ่มรายการ

หากต้องการให้การติดตามง่ายขึ้น คุณควรจัดกลุ่มองค์ประกอบหลายรายการที่ต้องการให้แสดงในรายการฟีดเดียวกัน เช่น ชื่อ รูปภาพ และราคาของรายการเดียวกัน การใช้กลุ่มทำให้ครีเอทีฟโฆษณาติดตามการโต้ตอบกับทั้งกลุ่มได้ แทนที่จะต้องติดตามการโต้ตอบกับแต่ละองค์ประกอบ

1. สร้างองค์ประกอบตัวยึดตำแหน่งสำหรับรายการเดียว โดยอาจรวมชื่อรายการและรูปภาพของรายการนั้นๆ เป็นต้น

   

2. สร้างกลุ่มใหม่พร้อมองค์ประกอบเหล่านี้โดยเลือกองค์ประกอบต่างๆ คลิกขวาที่องค์ประกอบที่เลือก แล้วคลิกสร้างกลุ่ม...

   

3. กรอกชื่อกลุ่มแล้วคลิกตกลง

ระบบจะเพิ่มกลุ่มลงในไลบรารีโดยอัตโนมัติเพื่อการใช้งานในอนาคต แต่จะยังไม่ลบอินสแตนซ์กลุ่มในพื้นที่งาน ในระหว่างนี้คุณจะย้ายกลุ่มออกไปด้านข้างได้

ขั้นตอนที่ 2 แสดงรายการในแกลเลอรี

คุณจะใช้ได้ทั้งคอมโพเนนต์แกลเลอรีแบบกวาดนิ้วได้หรือแกลเลอรีภาพหมุนเพื่อแสดงรายการฟีด

1. เพิ่มแกลเลอรีลงในพื้นที่งาน

2. ตั้งค่ารหัส (เช่น gwd-swipegallery_1) ในแผงคุณสมบัติสำหรับแกลเลอรี

3. ใส่ชื่อกลุ่มที่คุณสร้างไว้ก่อนหน้านี้ (เช่น Group1) ในช่องคุณสมบัติของกลุ่ม

   

ขั้นตอนที่ 3 เพิ่มการเชื่อมโยงแบบไดนามิก

เชื่อมโยงองค์ประกอบครีเอทีฟโฆษณากับฟีดด้วยการเชื่อมโยงข้อมูลแบบไดนามิก

1. ในแผงไดนามิก ให้คลิกปุ่มเพิ่มการเชื่อมโยงแบบไดนามิก เพื่อเปิดกล่องโต้ตอบคุณสมบัติไดนามิก

2. เลือกสคีมาข้อมูล หากยังไม่ได้เลือก

3. สำหรับแต่ละองค์ประกอบภายในกลุ่ม ให้เชื่อมโยงแอตทริบิวต์ของแต่ละองค์ประกอบกับออบเจ็กต์สคีมาข้อมูลที่เกี่ยวข้อง

   

4. เพิ่มการเชื่อมโยงสำหรับกลุ่มภายในแกลเลอรี แล้วเลือกแอตทริบิวต์ขององค์ประกอบ ทำขั้นตอนนี้ซ้ำกับทุกรายการในคอลเล็กชัน ตั้งค่าออบเจ็กต์สคีมาข้อมูลเป็นรายการระดับบนสุดที่ตรงกับสคีมาข้อมูล (เช่น ค้าปลีกหรือท่องเที่ยว)

   

5. คลิกตกลงเพื่อบันทึก

ตอนนี้คุณจะลบอินสแตนซ์กลุ่มออกจากพื้นที่งานได้แล้ว

ขั้นตอนที่ 4 เพิ่มเหตุการณ์การโต้ตอบของผู้ใช้ลงในแกลเลอรี

รายการทั้งหมดต้องมีเหตุการณ์ mouseover และ mouseout เพื่อให้ครีเอทีฟโฆษณาติดตามรายการที่ใช้งานอยู่ได้

1. คลิกขวาที่แกลเลอรีและเลือกเพิ่มเหตุการณ์... เพื่อเพิ่มเหตุการณ์ใหม่สำหรับเมาส์ > mouseover

   

2. เลือกการทำงานที่กำหนดเอง > gwd.itemMouseover แล้วคลิกตกลง

   

3. เพิ่มเหตุการณ์ต่อไปนี้ลงในแกลเลอรีเพื่อให้มีเหตุการณ์ทั้งสิ้น 5 เหตุการณ์โดยมีแกลเลอรีนั้นเป็นเป้าหมาย

   เหตุการณ์	การทำงาน
   เมาส์ > เมาส์โอเวอร์ (เพิ่มแล้วในขั้นตอนก่อนหน้า)	กำหนดเอง > gwd.ItemMouseover
   เมาส์ > เมาส์เอาต์	กำหนดเอง > gwd.ItemMouseout
   เมาส์ > คลิก	กำหนดเอง > gwd.exitToItem
   แกลเลอรีแบบกวาดนิ้วได้ หรือ แกลเลอรีภาพหมุน > เฟรมที่เปิดใช้งาน	กำหนดเอง > gwd.galleryFrameActivated
   แกลเลอรีแบบกวาดนิ้วได้ หรือแกลเลอรีภาพหมุน > เฟรมที่แสดง	กำหนดเอง > gwd.galleryFrameShown

ขั้นตอนที่ 5 ทำการแก้ไขในมุมมองโค้ด

สลับไปใช้มุมมองโค้ดเพื่อปรับเปลี่ยนโค้ดสำหรับฟังก์ชันการทำงานของแกลเลอรีในขั้นสุดท้ายด้วยฟีดแบบไดนามิก

1. ในมุมมองโค้ด ให้หาองค์ประกอบกลุ่มที่ฝังอยู่ในองค์ประกอบแกลเลอรี เพิ่มคลาส 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>

2. หาฟังก์ชัน handleWebComponentsReady ในมุมมองโค้ด Uncomment บรรทัดที่เรียกใช้ฟังก์ชัน common.setGallery โดยนำอักขระ // ออก แล้วใส่รหัสของแกลเลอรี (เช่น gwd-swipegallery_1) แทน swipegallery-items

   /**
     * 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);
   }

ขั้นตอนอื่นๆ

• อ่านวิธีสร้างฟีดข้อมูลแบบไดนามิก หากยังไม่ได้อ่าน
• แสดงตัวอย่างครีเอทีฟโฆษณาโดยใช้ข้อมูลตัวอย่างเพื่อดูว่าครีเอทีฟโฆษณาจะมีลักษณะอย่างไร