เกริ่นนำ
Google Tag Manager ช่วยให้นักพัฒนาซอฟต์แวร์เปลี่ยนค่าของการกำหนดค่าในแอปพลิเคชันบนอุปกรณ์เคลื่อนที่ โดยใช้อินเทอร์เฟซ Google Tag Manager โดยไม่ต้องสร้างและส่งคำขอไบนารีแอปพลิเคชันอีกครั้งไปยังตลาดกลางแอปอีกครั้ง
ซึ่งจะมีประโยชน์ในการจัดการค่าของการกำหนดค่าหรือแฟล็กใดก็ตามในแอปพลิเคชันที่คุณอาจต้องเปลี่ยนแปลงในอนาคต ซึ่งรวมถึง
- การตั้งค่า UI และสตริงการแสดงผลแบบต่างๆ
- ขนาด สถานที่ตั้ง หรือประเภทของโฆษณาที่แสดงในแอปพลิเคชัน
- การตั้งค่าเกมต่างๆ
ระบบอาจประเมินค่าของการกำหนดค่าในระหว่างรันไทม์โดยใช้กฎต่างๆ เพื่อเปิดใช้การกำหนดค่าแบบไดนามิก เช่น
- การใช้ขนาดหน้าจอเพื่อกำหนดขนาดโฆษณาแบนเนอร์
- การใช้ภาษาและตำแหน่งเพื่อกำหนดค่าองค์ประกอบ UI
Google Tag Manager ยังเปิดใช้การติดตั้งใช้งานแท็กและพิกเซลติดตามในแอปพลิเคชันแบบไดนามิกได้ด้วย นักพัฒนาซอฟต์แวร์จะพุชเหตุการณ์สำคัญเข้าไปในชั้นข้อมูลและตัดสินใจในภายหลังได้ว่าควรให้แท็กหรือพิกเซลติดตามใดเริ่มทำงาน
ก่อนที่คุณจะเริ่ม
ทำตามขั้นตอนต่อไปนี้ก่อนเริ่มคู่มือเริ่มต้นใช้งาน
- ติดตั้ง Android SDK
- ดาวน์โหลด SDK บริการ Google Play
- สร้างบัญชี Google Tag Manager
- กำหนดค่าคอนเทนเนอร์ Google Tag Manager
เมื่อทำตามขั้นตอนเหล่านี้เสร็จแล้ว ส่วนที่เหลือของคู่มือนี้จะแนะนำวิธีกำหนดค่าและใช้ Google Tag Manager ภายในแอปพลิเคชัน Android
เริ่มต้นใช้งาน
หลังจากทำตามคู่มือเริ่มต้นใช้งานนี้ คุณจะเข้าใจวิธีการ:
- เพิ่ม Google Tag Manager ลงในโปรเจ็กต์
- เริ่มต้น Tag Manager ในแอปพลิเคชัน
- รับค่าของการกำหนดค่าจากคอนเทนเนอร์ Tag Manager
- พุชค่าและเหตุการณ์ใน
dataLayer
- แสดงตัวอย่าง แก้ไขข้อบกพร่อง และนำคอนเทนเนอร์ไปใช้จริง
คู่มือนี้ใช้ข้อมูลโค้ดจากแอปพลิเคชันตัวอย่าง Cute Animals
ที่มาพร้อมกับ SDK บริการ Google Play
แหล่งที่มาที่สมบูรณ์ของโปรเจ็กต์นี้มีอยู่ใน: <android-sdk-directory>/extras/google/google_play_services/tagmanager/cuteanimals
1. การเพิ่ม Google Tag Manager ลงในโปรเจ็กต์ของคุณ
วิธีเพิ่ม Google Tag Manager ในโครงการ
- ตั้งค่า SDK บริการ Google Play
- หากคุณใช้ IDE อื่นที่ไม่ใช่
Android Studio ให้เพิ่มสิทธิ์ต่อไปนี้ลงในไฟล์
AndroidManifest.xml
<!-- For TagManager SDK --> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
- หากต้องการเปิดใช้
InstallReferrerReceiver
ให้เรียกผู้รับ Google Analytics เพื่อตั้งค่าข้อมูลแคมเปญ ให้เพิ่มค่าต่อไปนี้ลงในไฟล์AndroidManifest.xml
<!-- Used for install referrer tracking--> <service android:name="com.google.android.gms.tagmanager.InstallReferrerService" /> <receiver android:name="com.google.android.gms.tagmanager.InstallReferrerReceiver" android:exported="true"> <intent-filter> <action android:name="com.android.vending.INSTALL_REFERRER" /> </intent-filter> </receiver>
2. การเพิ่มไฟล์คอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์ของคุณ
Google เครื่องจัดการแท็กใช้คอนเทนเนอร์เริ่มต้นเมื่อเรียกใช้แอปพลิเคชันครั้งแรก ระบบจะหยุดใช้งานคอนเทนเนอร์เริ่มต้นทันทีที่แอปเรียกข้อมูลคอนเทนเนอร์ใหม่ผ่านเครือข่ายได้
หากต้องการดาวน์โหลดและเพิ่มไบนารีของคอนเทนเนอร์เริ่มต้นลงในแอปพลิเคชัน ให้ทำดังนี้
- ลงชื่อเข้าใช้เว็บอินเทอร์เฟซของ Google Tag Manager
- เลือกเวอร์ชันของคอนเทนเนอร์ที่ต้องการดาวน์โหลด
- คลิกปุ่มดาวน์โหลดเพื่อเรียกข้อมูลไบนารีคอนเทนเนอร์
- เพิ่มไฟล์ไบนารีของคอนเทนเนอร์ที่ดาวน์โหลดไว้ลงในโปรเจ็กต์เป็นทรัพยากรดิบ
- หากไม่มีโฟลเดอร์ย่อย
raw
ภายใต้<project-root>/res/
ให้สร้างโฟลเดอร์ดังกล่าว - เปลี่ยนชื่อไฟล์ไบนารีของคอนเทนเนอร์ หากจำเป็น โดยจะมีแต่ตัวอักษรพิมพ์เล็ก ตัวเลข และขีดล่างเท่านั้น
- คัดลอกไฟล์ไบนารีของคอนเทนเนอร์ไปยังโฟลเดอร์
<project-root>/res/raw
- หากไม่มีโฟลเดอร์ย่อย
แม้ว่าระบบจะแนะนำให้ใช้ไฟล์ไบนารี แต่หากคอนเทนเนอร์ไม่มีกฎหรือแท็ก คุณก็อาจเลือกใช้ไฟล์ JSON แบบง่ายแทนก็ได้
3. กำลังเริ่มต้น Google Tag Manager
วิธีเริ่มต้น Google Tag Manager ในแอปพลิเคชัน
- รับซิงเกิลของ
TagManager
:TagManager tagManager = TagManager.getInstance(this);
- ใช้ซิงเกิล
TagManager
เพื่อส่งคำขอโหลดคอนเทนเนอร์ โดยระบุรหัสคอนเทนเนอร์ Google Tag Manager และไฟล์คอนเทนเนอร์เริ่มต้น รหัสคอนเทนเนอร์ควรเป็นตัวพิมพ์ใหญ่ และตรงกับรหัสคอนเทนเนอร์ในอินเทอร์เฟซเว็บของ Google Tag Manager ทุกประการ การเรียกไปยังloadContainerPreferNonDefault()
ไม่บล็อก และแสดงผลPendingResult
:PendingResult<ContainerHolder> pending = tagManager.loadContainerPreferNonDefault(CONTAINER_ID, R.raw.defaultcontainer_binary);
- ใช้
ResultCallback
เพื่อแสดงผลContainerHolder
เมื่อโหลดเสร็จแล้วหรือหมดเวลา:// The onResult method will be called as soon as one of the following happens: // 1. a saved container is loaded // 2. if there is no saved container, a network container is loaded // 3. the 2-second timeout occurs pending.setResultCallback(new ResultCallback<ContainerHolder>() { @Override public void onResult(ContainerHolder containerHolder) { ContainerHolderSingleton.setContainerHolder(containerHolder); Container container = containerHolder.getContainer(); if (!containerHolder.getStatus().isSuccess()) { Log.e("CuteAnimals", "failure loading container"); displayErrorToUser(R.string.load_error); return; } ContainerLoadedCallback.registerCallbacksForContainer(container); containerHolder.setContainerAvailableListener(new ContainerLoadedCallback()); startMainActivity(); } }, TIMEOUT_FOR_CONTAINER_OPEN_MILLISECONDS, TimeUnit.MILLISECONDS);
การสร้าง ContainerHolder Singleton
คุณควรดูแลรักษา
ContainerHolder
เพียง 1 อินสแตนซ์ต่อการเรียกใช้แอปพลิเคชัน นี่คือเหตุผลที่ตัวอย่างข้างต้นใช้คลาสยูทิลิตีContainerHolderSingleton
เพื่อจัดการการเข้าถึงอินสแตนซ์ContainerHolder
ชั้นเรียนContainerHolderSingleton
มีลักษณะดังนี้package com.google.android.tagmanager.examples.cuteanimals; import com.google.android.gms.tagmanager.ContainerHolder; /** * Singleton to hold the GTM Container (since it should be only created once * per run of the app). */ public class ContainerHolderSingleton { private static ContainerHolder containerHolder; /** * Utility class; don't instantiate. */ private ContainerHolderSingleton() { } public static ContainerHolder getContainerHolder() { return containerHolder; } public static void setContainerHolder(ContainerHolder c) { containerHolder = c; } }
4. การรับค่าการกำหนดค่าจากคอนเทนเนอร์
เมื่อคอนเทนเนอร์โหลดแล้ว คุณจะดึงค่าของการกำหนดค่าได้โดยใช้เมธอด Container.get<type>()
ใดก็ได้ ค่าของการกำหนดค่าจะกำหนดโดยใช้ตัวแปรการรวบรวมค่าของ Google Tag Manager ตัวอย่างเช่น เมธอดต่อไปนี้จะเรียกสีล่าสุดที่เราตัดสินใจใช้สําหรับองค์ประกอบ UI แล้วแสดงผลเป็นจำนวนเต็ม
/** * Returns an integer representing a color. */ private int getColor(String key) { return colorFromColorName(containerHolder.getContainer().getString(key)); }
โค้ดนี้ทำ 2 สิ่งต่อไปนี้เพื่อเรียกข้อมูลชื่อสีจากคอนเทนเนอร์
- รับ
Container
จากContainerHolder
โดยใช้ContainerHolder.getContainer()
- รับค่าสีโดยใช้
Container.getString(key)
ซึ่งเป็นที่ที่คุณได้กำหนดคีย์และค่าในอินเทอร์เฟซเว็บของ Google Tag Manager
5. การพุชเหตุการณ์และค่าไปยัง dataLayer
Google Tag Manager ยังมี dataLayer
ซึ่งคุณสามารถพุชข้อมูลเกี่ยวกับแอปพลิเคชันที่อ่านในส่วนอื่นๆ ของแอปพลิเคชันได้ หรือเอาไว้ใช้เพื่อเริ่มการทำงานของแท็กที่คุณกำหนดค่าไว้ในอินเทอร์เฟซเว็บของ Google Tag Manager
การพุชค่าไปยัง dataLayer
dataLayer
มอบการคงอยู่อีกชั้นที่คุณสามารถใช้เพื่อจัดเก็บคู่คีย์-ค่าที่คุณอาจต้องการใช้ในส่วนอื่นๆ ของแอปพลิเคชัน หรือใช้เป็นอินพุตของแท็ก Google Tag Manager
หากต้องการพุชค่าไปยัง dataLayer
ให้ทำตามรูปแบบนี้
- รับซิงเกิล
DataLayer
:DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
- พุชเหตุการณ์โดยใช้
DataLayer.push()
:// Put the image_name into the data layer for future use. TagManager.getInstance(this).getDataLayer().push(IMAGE_NAME_KEY, imageName);
หากต้องการรับค่าจาก dataLayer
ให้ใช้
DataLayer.get(key)
การส่งเหตุการณ์ไปยัง dataLayer
การพุชเหตุการณ์ไปยัง dataLayer
ช่วยให้คุณแยกโค้ดของแอปพลิเคชันออกจากแท็กที่คุณอาจต้องการให้เริ่มทำงานเพื่อตอบสนองต่อเหตุการณ์เหล่านั้นได้
เช่น แทนที่จะฮาร์ดโค้ดการเรียกใช้การติดตามการดูหน้าจอของ Google Analytics ลงในแอปพลิเคชันของคุณ คุณสามารถพุชเหตุการณ์หน้าจอไปยัง dataLayer
และกำหนดแท็กติดตามผ่านอินเทอร์เฟซเว็บของ Google Tag Manager ได้ ซึ่งให้ความยืดหยุ่นในการแก้ไขแท็กดังกล่าวหรือเพิ่มแท็กอื่นๆ ที่ตอบสนองต่อเหตุการณ์บนหน้าจอโดยไม่ต้องอัปเดตโค้ดของแอปพลิเคชัน
หากต้องการพุชเหตุการณ์ไปยัง dataLayer
ให้ทำตามรูปแบบนี้
- รับซิงเกิล
DataLayer
:DataLayer dataLayer = TagManager.getInstance(context).getDataLayer();
- พุชเหตุการณ์โดยใช้
DataLayer.pushEvent()
:dataLayer.pushEvent("openScreen", DataLayer.mapOf("screenName", screenName));
DataLayer.mapOf()
เป็นวิธียูทิลิตีที่คุณสามารถใช้เพื่อสร้างแมปของคู่คีย์-ค่าที่จะอัปเดตdataLayer
พร้อมกันที่มีการพุชเหตุการณ์ได้อย่างง่ายดาย
6. การแสดงตัวอย่าง การแก้ไขข้อบกพร่อง และการเผยแพร่
ก่อนที่จะเผยแพร่เวอร์ชันของคอนเทนเนอร์ คุณจะต้องดูตัวอย่างคอนเทนเนอร์เพื่อให้แน่ใจว่าทำงานได้ตามที่ต้องการ Google Tag Manager ช่วยให้คุณดูตัวอย่างเวอร์ชันคอนเทนเนอร์ได้โดยการสร้างลิงก์และคิวอาร์โค้ดในเว็บอินเทอร์เฟซและใช้ลิงก์เพื่อเปิดแอปพลิเคชัน นอกจากนี้ คุณยังเปิดใช้โหมดการบันทึกแบบละเอียดเพื่อแก้ไขข้อบกพร่องของลักษณะการทำงานที่ไม่คาดคิดได้อีกด้วย
กำลังแสดงตัวอย่าง
หากต้องการดูตัวอย่างเวอร์ชันของคอนเทนเนอร์ ให้ทำตามขั้นตอนต่อไปนี้
- กำลังเพิ่มตัวอย่างนี้
Activity
ไปยังไฟล์AndroidManifest
<!-- Add preview activity. --> <activity android:name="com.google.android.gms.tagmanager.PreviewActivity" android:label="@string/app_name" android:noHistory="true"> <!-- optional, removes the previewActivity from the activity stack. --> <intent-filter> <data android:scheme="tagmanager.c.com.google.android.tagmanager.examples.cuteanimals" /> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE"/> </intent-filter> </activity>
อย่าลืมแก้ไขบรรทัดนี้ให้มีชื่อแพ็กเกจของแอปพลิเคชัน:
<data android:scheme="tagmanager.c.com.google.android.tagmanager.examples.cuteanimals" />
- สร้างลิงก์แสดงตัวอย่างในอินเทอร์เฟซเว็บของ Google Tag Manager
- ลงชื่อเข้าใช้ Google Tag Manager
- เลือกเวอร์ชันของคอนเทนเนอร์เพื่อแสดงตัวอย่าง
- คลิกปุ่มตัวอย่าง
- ป้อนชื่อแพ็กเกจของแอปพลิเคชันและคลิกสร้างลิงก์เริ่มแสดงตัวอย่าง
- ใช้ลิงก์หรือคิวอาร์โค้ดที่สร้างขึ้นเพื่อเปิดใช้งานแอปพลิเคชัน
- คุณออกจากโหมดแสดงตัวอย่างได้โดยคลิกลิงก์ที่สร้างขึ้นจากตัวเลือกสร้างลิงก์แสดงตัวอย่างสิ้นสุดในอินเทอร์เฟซเว็บ
การแก้ไขข้อบกพร่อง
หากคุณต้องการแก้ปัญหาการใช้งานคอนเทนเนอร์ ให้เปิดใช้การบันทึกแบบละเอียดโดยการเรียกใช้
TagManager.setVerboseLoggingEnabled(true)
:
// Modify the log level of the logger to print out not only // warning and error messages, but also verbose, debug, info messages. tagManager.setVerboseLoggingEnabled(true);
การเผยแพร่
หลังจากที่ดูตัวอย่างคอนเทนเนอร์และยืนยันว่าคอนเทนเนอร์ทำงานได้ตามที่ต้องการแล้ว คุณจะนำคอนเทนเนอร์ไปใช้จริงได้ ค่าต่างๆ ของการกำหนดค่าคอนเทนเนอร์ รวมถึงแท็กและเหตุการณ์จะพร้อมใช้งานสำหรับผู้ใช้ในครั้งถัดไปที่มีการรีเฟรชคอนเทนเนอร์ของผู้ใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการรีเฟรชคอนเทนเนอร์
การกำหนดค่าขั้นสูง
ส่วนต่อไปนี้จะอธิบายตัวเลือกการกำหนดค่าขั้นสูงที่คุณต้องการใช้เพื่อปรับแต่งการใช้งาน Google Tag Manager เพิ่มเติม
การรีเฟรชคอนเทนเนอร์
โดยค่าเริ่มต้น คอนเทนเนอร์จะมีสิทธิ์รีเฟรชทุกๆ 12 ชั่วโมง หากต้องการรีเฟรชคอนเทนเนอร์ด้วยตนเอง ให้ใช้
ContainerHolder.refresh()
ดังนี้
ContainerHolderSingleton.getContainerHolder().refresh();
นี่คือการเรียกใช้แบบอะซิงโครนัสที่จะไม่แสดงผลลัพธ์ทันที หากต้องการลดการจราจรของข้อมูลในเครือข่าย ระบบอาจเรียกใช้ refresh()
เพียงครั้งเดียวทุกๆ 15 นาที ไม่เช่นนั้นจะไม่มีการดำเนินการ