Panduan penyiapan AMP & Tag Manager

Project Accelerated Mobile Pages (AMP) adalah platform web open source yang membantu menyempurnakan performa konten web Anda. AMP menyertakan dukungan bawaan untuk Google Tag Manager. Dokumen ini menjelaskan cara yang direkomendasikan untuk menyiapkan Google Tag Manager di halaman AMP.

Untuk menginstal Tag Manager untuk AMP:

Buat penampung AMP di Tag Manager.
Tambahkan cuplikan Tag Manager ke halaman AMP.
Konfigurasikan tag di penampung Tag Manager dan publikasikan.

Membuat penampung AMP

Tag Manager memiliki jenis penampung AMP. Buat penampung AMP baru untuk project Anda:

Di layar Akun, klik Tindakan Lainnyas () untuk akun yang ingin Anda gunakan. Pilih Buat Penampung.
Beri nama penampung. Gunakan nama deskriptif, misalnya "example.com - berita - AMP".
Di bagian Tempat Menggunakan Penampung, pilih AMP.
Klik Buat.

Penampung Anda sudah siap. Langkah berikutnya adalah menginstal kode Tag Manager di halaman AMP.

Tag Manager akan memberikan informasi tentang cara terbaik menginstal cuplikan kode, dan Anda dapat melihat bagian berikutnya untuk mengetahui panduan lebih lanjut.

Menambahkan cuplikan Tag Manager

Setelah membuat penampung AMP baru, layar Instal Google Tag Manager akan muncul. Tag Manager memberikan dua cuplikan kode. Salin cuplikan kode ini sehingga muncul di halaman AMP.

Catatan: Untuk mengakses cuplikan kode nanti, klik nomor ID penampung di bagian atas halaman ringkasan ruang kerja, atau klik Admin, lalu Instal Google Tag Manager.

Cuplikan pertama menambahkan komponen amp-analytics ke halaman AMP Anda. Kode ini berada di bagian akhir <head> pada halaman, dan seharusnya hanya muncul sekali di halaman.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Penting: Hanya tambahkan kode ini ke halaman Anda jika belum ada, dan pastikan hanya muncul sekali per halaman.

Cuplikan kedua mengonfigurasi amp-analytics untuk menggunakan Tag Manager. Tempatkan kode ini tepat setelah elemen <body> pembuka. Ganti GTM-CONTAINER_ID dengan ID penampung Tag Manager, atau copy-paste seluruh cuplikan dari antarmuka pengguna Tag Manager.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Mengonfigurasi penampung Anda dan publikasikan

Jika halaman Anda memiliki cuplikan penampung yang diinstal dengan benar, halaman tersebut akan dapat mengaktifkan tag yang diterapkan dari Tag Manager. Langkah selanjutnya adalah membuat konfigurasi tag dan mempublikasikan penampung.

Untuk membuat tag baru:

Klik Tag Baru.
Klik Konfigurasi Tag lalu pilih jenis tag dari daftar tag AMP yang didukung.
Konfigurasikan tag dengan informasi yang disediakan oleh vendor tag Anda.
Klik Pemicuan dan tambahkan satu atau beberapa kondisi kejadian yang akan menyebabkan tag diaktifkan.
Beri nama pemicu dan klik Simpan.

Ulangi langkah-langkah ini untuk konfigurasi tag tambahan apa pun. Saat konfigurasi penampung Anda sudah siap, publikasikan penampung agar perubahan diterapkan.

Variabel halaman

Tag Manager dapat menangkap variabel AMP serta menggunakannya dalam konfigurasi tag dan pemicu. Misalnya, halaman yang menjual sepatu mungkin memiliki variabel yang mendeskripsikan properti sepatu tertentu. Nilai ini dapat digunakan untuk membuat variabel Tag Manager:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "sepatu",
              "color": "merah"
          }
      }
  </script>
</amp-analytics>

Untuk membuat variabel yang ditentukan pengguna di Tag Manager yang menangkap variabel warna dari kode di atas:

Klik Variabel.
Di bagian Variabel Buatan Pengguna, klik Baru.
Klik Konfigurasi Variabel lalu pilih Variabel AMP.
Di kolom Nama Variabel Amp, masukkan nama kolom (misalnya "warna".)
Beri nama deskriptif pada variabel (misalnya "Variabel AMP - warna".)
Klik Simpan.

Tag AMP dengan Dukungan Tag Manager

Apakah ini membantu?

Bagaimana cara meningkatkannya?