CINXE.COM
The data layer | Tag Manager | Google for Developers
<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/tag-platform/tag-manager/datalayer"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/tag-platform/tag-manager/datalayer" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/tag-platform/tag-manager/datalayer" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ru" /><link rel="alternate" hreflang="es" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=es" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=vi" /><title>The data layer | Tag Manager | Google for Developers</title> <meta property="og:title" content="The data layer | Tag Manager | Google for Developers"><meta name="description" content="Learn how events and variables are passed to Google Tag Manager and gtag.js and triggers set up based on the values of variables."> <meta property="og:description" content="Learn how events and variables are passed to Google Tag Manager and gtag.js and triggers set up based on the values of variables."><meta property="og:url" content="https://developers.google.com/tag-platform/tag-manager/datalayer"><meta property="og:image" content="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/opengraph/google-blue.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "The data layer" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Tags", "item": "https://developers.google.com/tag-platform" },{ "@type": "ListItem", "position": 2, "name": "Tag Manager", "item": "https://developers.google.com/tag-platform/tag-manager" },{ "@type": "ListItem", "position": 3, "name": "The data layer", "item": "https://developers.google.com/tag-platform/tag-manager/datalayer" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="google-blue" type="article" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/tag-platform" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Tags" > Tags </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developers.google.com/tag-platform/devguides" track-metadata-eventdetail="https://developers.google.com/tag-platform/devguides" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - the google tag" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: The Google tag" track-name="the google tag" > The Google tag </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/gtagjs" track-metadata-eventdetail="https://developers.google.com/tag-platform/gtagjs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - gtag.js" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: gtag.js" track-name="gtag.js" > gtag.js </a> </tab> <tab class="devsite-active"> <a href="https://developers.google.com/tag-platform/tag-manager" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - tag manager" track-metadata-module="primary nav" aria-label="Tag Manager, selected" data-category="Site-Wide Custom Events" data-label="Tab: Tag Manager" track-name="tag manager" > Tag Manager </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/security" track-metadata-eventdetail="https://developers.google.com/tag-platform/security" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - security & privacy" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Security & Privacy" track-name="security & privacy" > Security & Privacy </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/learn" track-metadata-eventdetail="https://developers.google.com/tag-platform/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Tag Manager" tenant-name="Google for Developers" project-scope="/tag-platform/tag-manager" url-scoped="https://developers.google.com/s/results/tag-platform/tag-manager" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/tag-platform/tag-manager" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Tag Manager" > Tag Manager </a> </li> </ul> </div> <div class="devsite-product-button-row"> <a href="https://tagmanager.google.com/" class="button " >Open Google Tag Manager</a> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab class="devsite-active"> <a href="https://developers.google.com/tag-platform/tag-manager" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" aria-label="About, selected" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://support.google.com/tagmanager/answer/14842164" track-metadata-eventdetail="https://support.google.com/tagmanager/answer/14842164" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web" track-name="web" > Web </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/tag-manager/mobile" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager/mobile" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - mobile" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Mobile" track-name="mobile" > Mobile </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/tag-manager/server-side" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager/server-side" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - server" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Server" track-name="server" > Server </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/tag-manager/templates" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager/templates" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - templates" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Templates" track-name="templates" > Templates </a> </tab> <tab > <a href="https://developers.google.com/tag-platform/tag-manager/api/v2" track-metadata-eventdetail="https://developers.google.com/tag-platform/tag-manager/api/v2" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - rest api" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: REST API" track-name="rest api" > REST API </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/tag-platform" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Tags" > Tags </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/tag-platform/devguides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: The Google tag" track-name="the google tag" data-category="Site-Wide Custom Events" data-label="Responsive Tab: The Google tag" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > The Google tag </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/gtagjs" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: gtag.js" track-name="gtag.js" data-category="Site-Wide Custom Events" data-label="Responsive Tab: gtag.js" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > gtag.js </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Tag Manager" track-name="tag manager" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tag Manager" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Tag Manager </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> About </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="https://support.google.com/tagmanager/answer/14842164" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web" track-name="web" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager/mobile" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Mobile" track-name="mobile" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobile" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobile </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager/server-side" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Server" track-name="server" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Server" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Server </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager/templates" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Templates" track-name="templates" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Templates" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Templates </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/tag-manager/api/v2" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: REST API" track-name="rest api" data-category="Site-Wide Custom Events" data-label="Responsive Tab: REST API" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > REST API </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/tag-platform/security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Security & Privacy" track-name="security & privacy" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security & Privacy" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security & Privacy </span> </a> </li> <li class="devsite-nav-item"> <a href="/tag-platform/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Concepts and components</span> </div></li> <li class="devsite-nav-item"><a href="/tag-platform/tag-manager" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /tag-platform/tag-manager" track-type="bookNav" track-name="click" track-metadata-eventdetail="/tag-platform/tag-manager" ><span class="devsite-nav-text" tooltip>About Tag Manager</span></a></li> <li class="devsite-nav-item"><a href="/tag-platform/tag-manager/datalayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /tag-platform/tag-manager/datalayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/tag-platform/tag-manager/datalayer" ><span class="devsite-nav-text" tooltip>The data layer</span></a></li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/tag-platform" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Tags" > Tags </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/tag-platform/tag-manager" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="Tag Manager" > Tag Manager </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Tag Manager" product-id="102259" bucket="tag-platform" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://developers.google.com/static/tag-platform/images/logo_google_tag_manager_color_1x_web_64dp.png" project-support-url="https://developers.google.com/tag-platform/support" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> The data layer </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <div class="video-wrapper"> <devsite-video video-id="qFnohYiJ09U"></devsite-video> </div> <p>The data layer is an object used by Google Tag Manager and gtag.js to pass information to tags. Events or variables can be passed via the data layer, and triggers can be set up based on the values of variables.</p> <p>For example, if you fire a remarketing tag when the value of <code translate="no" dir="ltr">purchase_total</code> is greater than $100, or based on the specific events, e.g. when a button is clicked, your data layer can be configured to make that data available to your tags. The data layer object is structured as JSON. For example:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">eve</span><span class="devsite-syntax-kc">nt</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"checkout_button"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">g</span><span class="devsite-syntax-kc">t</span><span class="devsite-syntax-err">m</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">u</span><span class="devsite-syntax-kc">n</span><span class="devsite-syntax-err">iqueEve</span><span class="devsite-syntax-kc">nt</span><span class="devsite-syntax-err">Id</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">2</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">s</span><span class="devsite-syntax-kc">tart</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">1639524976560</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">scrollThreshold</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">90</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">scrollU</span><span class="devsite-syntax-kc">n</span><span class="devsite-syntax-err">i</span><span class="devsite-syntax-kc">ts</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"percent"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">scrollDirec</span><span class="devsite-syntax-kc">t</span><span class="devsite-syntax-err">io</span><span class="devsite-syntax-kc">n</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"vertical"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">tr</span><span class="devsite-syntax-err">iggers</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"1_27"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">value</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"120"</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>Google tags are designed to easily reference information that is added to the data layer in an organized and predictable way, rather than by parsing variables, transaction information, page categories, and other signals scattered throughout your page. A data layer implementation populated with variables and associated values will help to ensure that relevant data is available when your tags need them.</p> <h2 id="installation" data-text="Installation" tabindex="-1">Installation</h2> <p>For Tag Manager web page installations, you must create a data layer. The highlighted code below shows where the data layer is established, before Tag Manager is loaded.</p> <div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><strong><script> window.dataLayer = window.dataLayer || []; </script></strong> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');</script> <!-- End Google Tag Manager --> </code></pre></devsite-code> <p>In standard gtag.js implementations where the tag has been copied from within the product and added to a web page, the code to establish the data layer is provided. In custom implementations of the Google tag, add the data layer code at the beginning of your script, as shown in the highlighted example below:</p> <div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script> <script> <strong>window.dataLayer = window.dataLayer || [];</strong> function gtag(){dataLayer.push(arguments)}; gtag('js', new Date()); gtag('config', 'TAG_ID'); </script> </code></pre></devsite-code> <h2 id="how_data_layer_information_is_processed" data-text="How data layer information is processed" tabindex="-1">How data layer information is processed</h2> <p>When a container is loaded, Tag Manager will begin to process all queued data layer push messages. Tag Manager processes messages on a first-in, first-out basis: Each message is processed one at a time, in the order it was received. If the message is an event, any tags with trigger conditions that have been met will fire before Tag Manager moves on to the next message.</p> <p>If a <code translate="no" dir="ltr">gtag()</code> or <code translate="no" dir="ltr">dataLayer.push()</code> call is made by code on a page, in a Custom Template, or in a Custom HTML tag, the associated message is queued and processed after all other pending messages are evaluated. This means that any updated data layer values are not guaranteed to be available for the next event. To handle these cases, you should <a href="#use_a_data_layer_with_event_handlers">add an event name to a message</a> as it is pushed to the data layer, and then listen for that event name with a <a href="https://support.google.com/tagmanager/answer/7679219">Custom Event trigger</a>.</p> <aside class="special"><strong>Important:</strong><span> Do not use the <a href="https://support.google.com/tagmanager/answer/6107167#CustomHTML">Custom HTML tags</a> to deploy gtag.js-based code. Instead, use Tag Manager's native tag templates for <a href="https://support.google.com/tagmanager/topic/6334091">Google Ads</a>, <a href="https://support.google.com/tagmanager/topic/6333310">Analytics</a>, and <a href="https://support.google.com/tagmanager/topic/6334112">Floodlight</a>.</span></aside><aside class="special"><strong>Important:</strong><span> Do not use Custom HTML tags to configure <a href="https://support.google.com/tagmanager/answer/10718549">consent settings in Tag Manager</a>. Since consent settings need to be applied before the relevant tags fire in a Tag Manager container, you must apply <a href="/tag-platform/tag-manager/templates/consent-apis">Tag Manager Consent APIs</a> to configure default and update behavior. Using the <a href="/tag-platform/tag-manager/templates/consent-apis">Tag Manager Consent APIs</a> ensures consent updates are processed before any queued items in the data layer so that all tags fired by the same event see the same consent state.</span></aside><aside class="key-point"><strong>Key Point:</strong><span> You can use <a href="https://tagassistant.google.com">Google Tag Assistant</a> to inspect the status of your data layer at any point in a chain of events.</span></aside> <h2 id="use_a_data_layer_with_event_handlers" data-text="Use a data layer with event handlers" tabindex="-1">Use a data layer with event handlers</h2> <p>The <code translate="no" dir="ltr">dataLayer</code> object uses an <code translate="no" dir="ltr">event</code> command to initiate the sending of events.</p> <p>The Google tag and Tag Manager use a special data layer variable called <code translate="no" dir="ltr">event</code> that is used by JavaScript event listeners to fire tags when a user interacts with website elements. For example, you may want to fire a conversion tracking tag when a user clicks a purchase confirmation button. Events may be called whenever a user interacts with website elements such as links, buttons, scrolls, etc.</p> <p>This functionality is accomplished by calling <code translate="no" dir="ltr">dataLayer.push()</code> when an event occurs. The syntax for sending an event with <code translate="no" dir="ltr">dataLayer.push()</code> is as follows:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'event'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'event_name'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <p>Where <code translate="no" dir="ltr">event_name</code> is a string that describes the event, such as <code translate="no" dir="ltr">'login'</code>, <code translate="no" dir="ltr">purchase</code>, or <code translate="no" dir="ltr">search</code>.</p> <p>Use <code translate="no" dir="ltr">dataLayer.push()</code> to send event data when an action occurs that you'd like to measure. For example, to send an event when a user clicks a button, modify the button's <code translate="no" dir="ltr">onclick</code> handler to call <code translate="no" dir="ltr">dataLayer.push()</code>:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><button onclick="dataLayer.push({'event': 'login'});">Button 1</button> </code></pre></devsite-code> <p>You can push data layer variables to the data layer dynamically to capture information such as values entered or selected in a form, metadata associated with a video that the visitor is playing, the color of a product (e.g. a car) customized by the visitor, the destination URLs of clicked links, etc.</p> <p>As with events, this functionality is accomplished by calling the <code translate="no" dir="ltr">push()</code> API to add or replace data layer variables in the data layer. The basic syntax for setting dynamic data layer variables is as follows:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'variable_name'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'variable_value'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <p>Where <code translate="no" dir="ltr">'variable_name'</code> is a string indicating the name of the data layer variable to be set, and <code translate="no" dir="ltr">'variable_value'</code> is a string indicating the value of the data layer variable to be set or replaced.</p> <p>For example: To set a data layer variable with a color preference when a visitor engages with a product customization tool, you might push the following dynamic data layer variable:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'color'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'red'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <h2 id="one_push_multiple_variables" data-text="One push, multiple variables" tabindex="-1">One push, multiple variables</h2> <p>You can push multiple variables and events at once:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'color'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'red'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'conversionValue'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">50</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'event'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'customize'</span> <span class="devsite-syntax-p">});</span> </code></pre></devsite-code><aside class="special"><strong>Important:</strong><span> If you push a variable with the same name as an existing variable to the data layer, the existing value will be overwritten by the new value.</span></aside> <h2 id="persist_data_layer_variables" data-text="Persist data layer variables" tabindex="-1">Persist data layer variables</h2> <p>To persist data layer variables between web pages, call <code translate="no" dir="ltr">dataLayer.push()</code> after the data layer has been instantiated on each page load, and push the variables to the data layer. If you want these data layer variables to be available to Tag Manager when the container is loaded, add a <code translate="no" dir="ltr">dataLayer.push()</code> call above the Tag Manager container code as shown below.</p> <div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><script> window.dataLayer = window.dataLayer || []; <strong>dataLayer.push({ 'event': 'Pageview', 'pagePath': 'https://www.googleanalytics.dev/pancakes', 'pageTitle': 'Pancake Event Signup', 'visitorType': 'customer'</strong> }); </script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');</script> <!-- End Google Tag Manager --> </code></pre></devsite-code> <p>Each variable declared within the data layer object will persist only as long as the visitor remains on the current page. Data layer variables that are relevant across pages (e.g. <code translate="no" dir="ltr">visitorType</code>) must be declared in the data layer on each page of your website. While you don't need to put the same set of variables in the data layer on every page, you should use a consistent naming convention. In other words: if you set the page category on the signup page using a variable called <code translate="no" dir="ltr">pageCategory</code>, your product and purchase pages should use the <code translate="no" dir="ltr">pageCategory</code> variable as well.</p> <h2 id="troubleshooting" data-text="Troubleshooting" tabindex="-1">Troubleshooting</h2> <p>Here are some data layer troubleshooting tips:</p> <p><strong>Do not overwrite the <code translate="no" dir="ltr">window.dataLayer</code> variable:</strong> When you use the data layer directly (e.g. <code translate="no" dir="ltr">dataLayer = [{'item': 'value'}])</code>, it will overwrite any existing values in the <code translate="no" dir="ltr">dataLayer</code>. Tag Manager installations should instantiate the data layer as high up in the source code as possible, above the container snippet, using <code translate="no" dir="ltr">window.dataLayer = window.dataLayer || [];</code>. After the <code translate="no" dir="ltr">dataLayer</code> has been declared, use <code translate="no" dir="ltr">dataLayer.push({'item': 'value'})</code> to add additional values to it, and if those values need to be available to Tag Manager when the page loads, then that <code translate="no" dir="ltr">dataLayer.push()</code> call needs to be above the Tag Manager container code as well.</p> <p><strong>The <code translate="no" dir="ltr">dataLayer</code> object name is case-sensitive:</strong> If you try to push a variable or event without the proper casing, the push will not work.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">datalayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'pageTitle'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Home'</span><span class="devsite-syntax-p">});</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Bad (datalayer in lowercase)</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'pageTitle'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Home'</span><span class="devsite-syntax-p">});</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Good (dataLayer in camel case)</span> </code></pre></devsite-code> <p><code translate="no" dir="ltr">dataLayer.push</code> must be called with valid JavaScript objects. All data layer variable names should be enclosed in quotes.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-nx">variable</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'value'</span><span class="devsite-syntax-p">});</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Bad - no quote marks</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'new-variable'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'value'</span><span class="devsite-syntax-p">});</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Good - proper quote marks</span> </code></pre></devsite-code> <p><strong>Keep variable names consistent across pages:</strong> If you use different variable names for the same concept on different pages, Your tags will be unable to consistently fire in all desired locations.</p> <p><strong>Bad:</strong></p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-c1">// Homepage:</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'visitorType'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'low-value'</span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-c1">// Checkout Page:</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'visitor_type'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'high-value'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <p><strong>Good:</strong></p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-c1">// Homepage:</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'visitorType'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'low-value'</span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-c1">// Checkout Page:</span> <span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-s1">'visitorType'</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'high-value'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <h2 id="rename_the_data_layer" data-text="Rename the data layer" tabindex="-1">Rename the data layer</h2> <p>The default name of the data layer object initiated by the Google tag or Tag Manager is <code translate="no" dir="ltr">dataLayer</code>. If you'd prefer to use a different name for your data layer, you may do so by editing the data layer parameter value in your Google tag or Tag Manager container snippet with the name of your choice.</p> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="gtag.js" data-text="gtag.js" tabindex="-1">gtag.js</h3><p>Add a query parameter named “l” to the URL to set the new data layer name, e.g. <code translate="no" dir="ltr">l=myNewName</code>. Update all instances of <code translate="no" dir="ltr">dataLayer</code> in the Google tag snippet to the new name.</p> <div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&<strong>l=myNewName</strong>"></script> <script> window.myNewName = window.myNewName || []; function gtag(){myNewName.push(arguments);} gtag('js', new Date()); gtag('config', 'TAG_ID'); </script> </code></pre></devsite-code></section> <section><h3 id="tag-manager" data-text="Tag Manager" tabindex="-1">Tag Manager</h3><p>Replace the data layer parameter value (highlighted below) in your container snippet with the name of your choice.</p> <aside class="special"><strong>Important:</strong><span> Do <em>not</em> replace the non-highlighted parameter value.</span></aside><div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script',<strong>'myNewName</strong>','GTM-XXXXXX');</script> <!-- End Google Tag Manager --> </code></pre></devsite-code></section> </div> <p>Once renamed, all references to your data layer (i.e. when declaring the data layer above the snippet, or when pushing events or dynamic data layer variables to the data layer with the <code translate="no" dir="ltr">.push()</code> command) must be adjusted to reflect your custom data layer name:</p> <div></div><devsite-code><pre class="devsite-click-to-copy devsite-code-highlight" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><script> <strong>myNewName</strong> = window.dataLayer || []; <strong>myNewName</strong>.push({'variable_name': 'variable_value'}); </script> </code></pre></devsite-code><aside class="note"><strong>Note:</strong><span> Only one <code translate="no" dir="ltr">dataLayer</code> object is supported per page.</span></aside> <h2 id="custom_data_layer_methods" data-text="Custom data layer methods" tabindex="-1">Custom data layer methods</h2> <p>If you push a function to the data layer, it will be invoked with this set to an abstract data model. This abstract data model can get and set values to a key value store, and also provides a way to reset the data layer.</p> <aside class="special"><strong>Important:</strong><span> To use custom data layer methods, you must use <code translate="no" dir="ltr">.push</code> to send data to the <code translate="no" dir="ltr">dataLayer</code> variable directly. If you use <code translate="no" dir="ltr">gtag</code>, the function will be interpreted as an invalid command and ignored.</span></aside><div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="set" data-text="set" tabindex="-1">set</h3><p>The <code translate="no" dir="ltr">set</code> function on the abstract data model lets you set values to retrieve through get.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">this</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">set</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'time'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">());</span> <span class="devsite-syntax-p">});</span> </code></pre></devsite-code></section> <section><h3 id="get" data-text="get" tabindex="-1">get</h3><p>The <code translate="no" dir="ltr">get</code> function on the abstract data model lets you retrieve values that were set.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">existingTime</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">this</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">get</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'time'</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">existingTime</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">!==</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">null</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Change behavior based on whether or not this value exists...</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">else</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// ...</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">})</span> </code></pre></devsite-code></section> <section><h3 id="reset" data-text="reset" tabindex="-1">reset</h3><p>The <code translate="no" dir="ltr">reset</code> function on the abstract data model lets you reset the data in the data layer. This is most useful with a page that will remain open and the data layer size continues to grow over time. To reset the data layer, use the following code:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">dataLayer</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">push</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">this</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">reset</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-p">})</span> </code></pre></devsite-code></section> </div> <!--Help center article: https://support.google.com/tagmanager/answer/6164391--> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Tag Manager" product-id="102259" bucket="tag-platform" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-icon="https://developers.google.com/static/tag-platform/images/logo_google_tag_manager_color_1x_web_64dp.png" project-support-url="https://developers.google.com/tag-platform/support" > <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-10-09 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Tag Manager" product-id="102259" bucket="tag-platform" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://developers.google.com/static/tag-platform/images/logo_google_tag_manager_color_1x_web_64dp.png" project-support-url="https://developers.google.com/tag-platform/support" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-09 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//googledevelopers.blogspot.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.instagram.com/googlefordevs/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Instagram </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/googledevelopers/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//twitter.com/googledevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > X (Twitter) </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.youtube.com/user/GoogleDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > YouTube </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Programs</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.womentechmakers.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Women Techmakers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/gdg" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Developer Groups </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/experts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Developer Experts </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/accelerators" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Accelerators </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/gdsc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Google Developer Student Clubs </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.home.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 8)" > Google Home Developer Console </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension11": false, "dimension3": false, "dimension6": "en", "dimension5": "en", "dimension4": "Tag Manager", "dimension1": "Signed out"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}, {"id": "G-7GV7GNWXNZ", "purpose": 0}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Tag Manager", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="curJVhl2vLlcO1FQl2DusMVhaU7vyl"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Cloud__enable_free_trial_server_call","Analytics__enable_clearcut_logging","Cloud__enable_cloud_dlp_service","Cloud__enable_cloud_shell","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_ping","Concierge__enable_pushui","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_explain_this_code","Concierge__enable_concierge","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_complete_playlist_endpoint","Profiles__require_profile_eligibility_for_signin","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloudx_experiment_ids","Profiles__enable_public_developer_profiles","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__enable_view_transitions","DevPro__enable_developer_subscriptions","Profiles__enable_developer_profiles_callout","TpcFeatures__enable_required_headers","Profiles__enable_awarding_url","Search__enable_ai_search_summaries","Search__enable_ai_eligibility_checks","Profiles__enable_page_saving","Significatio__enable_by_tenant","MiscFeatureFlags__developers_footer_image","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_release_notes_notifications","Profiles__enable_completecodelab_endpoint","Cloud__enable_llm_concierge_chat","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_dashboard_curated_recommendations","Search__enable_ai_search_summaries_restricted","CloudShell__cloud_shell_button","Search__enable_suggestions_from_borg","BookNav__enable_tenant_cache_key","Profiles__enable_recognition_badges","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__developers_footer_dark_image","Search__enable_page_map","MiscFeatureFlags__enable_variable_operator","Profiles__enable_profile_collections","Concierge__enable_concierge_restricted","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_project_variables","Experiments__reqs_query_experiments"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[4,3],[3,2],[13,10],[16,13],[12,9],[1,1],[5,4],[6,5],[15,12],[11,8],[14,11]],[[2,2],[1,1]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>