--- Title: DataLayer & gtag.js Language: en-US Canonical URL to this Markdown version of this page: [https://docs.kvik.shop/marketing/datalayer-gtag.js.md](https://docs.kvik.shop/marketing/datalayer-gtag.js.md) Canonical URL to HTML version of this page (for humans): [https://docs.kvik.shop/marketing/datalayer-gtag.js](https://docs.kvik.shop/marketing/datalayer-gtag.js) --- # DataLayer & gtag.js Breadcrumb: [Marketing](https://docs.kvik.shop/marketing.md) > [DataLayer & gtag.js](https://docs.kvik.shop/marketing/datalayer-gtag.js.md) > To ensure maximum flexibility, portability, and ease of implementation, Google Tag Manager functions best when deployed alongside a data layer. > A data layer is an object that contains all of the information that shop passes to Google Tag Manager. > Information such as events or variables are passed to Google Tag Manager via the data layer, and triggers can be set up in Google Tag Manager based on the values of variables (e.g., fire a remarketing tag when purchase_total > $100) or based on the specific events. > >Rather than referencing variables, transaction information, page categories, and other important signals scattered throughout your page, Google Tag Manager is designed to easily reference information that are put in this data layer. No other measuring scripts are needed to implement directly in the shop. More common information about data layer in [Google's documentation][googleDataLayer]. - Shop provides extensive amount of information via Data Layer. - The name ot the data layer variable is `dataLayer`. ----- ## Common Variables Variables that are being added on all pages if its value is in particular state available (except `searchQuery`). ```javascript dataLayer.push({ 'pageType': 'homepage', 'languageCode': 'en', 'languageCode': 'EUR', 'environment': 'production', 'vehicle': {}, 'vehicleType': 'passenger', 'searchQuery': 'GDB 1330', 'consent': { 'security_storage': 'granted', 'functionality_storage': 'granted', 'personalization_storage': 'denied', 'analytics_storage': 'denied', 'ad_storage': 'denied' } }); ``` ### Variable 'pageType' - The variable is always available on all pages. - It provides type of a particular page. - Possible values of `pageType`: - Homepage = `homepage` - Search results page = `search` - Category page = `category` - Product detail page = `product` - Article detail page = `article` - Customer login page = `customerLogin` - Registration page = `customerRegistration` - Customer profile page = `customerEdit` - Page with the form for forgotten password = `customerForgottenPassword` - Category with products for particular vehicle = `vehicleCategory` - Vehicle manufacturer selection page = `vehicleSelection` - Vehicle model from particular manufacturer selection page = `vehicleSelectionManufacturer` - Shopping cart page = `shoppingCart` - Shopping cart recapitulation page = `shoppingCartRecapitulation` - Purchase confirmation page = `shoppingCartCompletition` ### Variable 'languageCode' - Code ([two-letter ISO 639-1][languageCodeIso]) of currently selected language on the shop. - The variable is always available on all pages. ### Variable 'currencyCode' - Code ([three-letter ISO 4217][currencyCodeIso]) of currently selected currency on the shop. - The variable is always available on all pages. ### Variable 'environment' - Server environment. - The variable is available on all pages. - Possible values of `environment`: - Production = `production` - Testing = `testing` - ... - Measuring scripts should be triggered only when `environment` is `production`. ### Variable 'vehicle' - Object with detailed informations about last visited vehicle by a visitor. - The variable is available on all pages but only after a visitor selects a vehicle on the shop. ### Variable 'vehicleType' - Vehicle type of last visited vehicle by a visitor. - The variable is available on all pages but only after a visitor selects a vehicle on the shop. - Possible values of `vehicleType`: - Passenger car = `passenger` - Heavy vehicle, commercial car, big truck = `truck` - Motorcycle = `motorcycle` ### Variable 'searchQuery' - Search phrase for current search results. - The variable is available only on the page with search results. ### Variable 'consent' - Contains 5 user consents according GDPR (cookies) in the structure defined by Google. - The variable is available only when the **Cookie Consent Manager** module is enabled in the shop. ----- ## User ID & User Properties ```javascript gtag('set', 'user_id', '7925be49-b8b9-413f-b415-4d6abde3823d'); gtag('set', 'user_properties', { 'userIsLoggedIn': 'true', 'userIsAdmin': 'false', 'userIsSurrogate': 'false', 'userSegment': 'C', 'userId': '7925be49-b8b9-413f-b415-4d6abde3823d', "userEmail": "info@kvik.shop" }); ``` ### Property 'userIsLoggedIn' - The value is `'true'` (string) when the current user is registered and logged-in, otherwise `'false'` (string). ### Property 'userIsAdmin' - The value is `'true'` (string) the current is the shop's administrator, otherwise `'false'` (string). ### Property 'userIsSurrogate' - When this is `'true'` (string), the current user is using a functionality that switches the prices and shopping cart to another user. - This functionality used mainly by shop administrators when they are creating orders for end users. ### Property 'userId' - Unique identifier ([UUID][uuid]) of logged-in user. - The variable is available on all pages but only when the user is logged in. ### Property 'userEmail' - Email address of logged-in user. - The variable is available on all pages but only when the user is logged in. ----- ## User Cookie Consents (Consent mode) When the integrated module **Cookie Consent Manager** is enabled in the shop, it adds the user consents configuration to the `dataLayer` according the Google's documentation. - https://support.google.com/analytics/answer/9976101?hl=en - https://developers.google.com/tag-platform/devguides/privacy ```javascript dataLayer.push({ 'consent': { 'security_storage': 'granted', 'functionality_storage': 'granted', 'personalization_storage': 'denied', 'analytics_storage': 'denied', 'ad_storage': 'denied' } }); gtag('consent', 'default', { 'security_storage': 'granted', 'functionality_storage': 'granted', 'personalization_storage': 'denied', 'analytics_storage': 'denied', 'ad_storage': 'denied' }); dataLayer.push({'event': 'consent_default'}); ``` ## Purchase Confirmation Page Variables that are being added on: - **purchase confirmation page** and - **shopping cart recapitulation page**. ```javascript dataLayer.push({ 'deliveryCountryCode': 'CZ', 'deliveryPostalCode': '70800', 'deliveryMethod': 'dpd', 'paymentMethod': 'cash_onDelivery' }); ``` ### Variable 'deliveryCountryCode' - Code ([two-letter ISO 3166-1 Alpha-2][countryCodeIso]) of destination country of the order. - The variable is always available on the both pages. ### Variable 'deliveryPostalCode' - Postal code for delivery the order. - The variable is available on both pages but only for delivery methods which require postal code to be filled by the customer. - E.g. delivery method "Pickup in the store" does not require postal code to be filled. ### Variable 'deliveryMethod' - Human-readable code of the delivery method selected by the customer for the current order. - The value may be common method (e.g. `personalPickup`, `pickupInStore`) or a name of specific currier (`fedEx`, `ups`). - The variable is always available on the both pages. - Example values of `deliveryMethod`: - `personalPickup` - `pickupInStore` - `customTransport` - `dpd` - `dhl` - `ups` - `fedEx` - `dpdParcelShop` - ... ### Variable 'paymentMethod' - Human-readable code of the payment method selected by the customer for the current order. - The value may be common method (e.g. `cash`, `creditCardOnDelivery`) or a name of specific payment provider method (`payPal_paypal`, `gpWebpay_crd`). - The variable is always available on the both pages. - Example values of `paymentMethod`: - `cash` - `cash_onDelivery` - `creditCardOnDelivery` - `bankTransfer` - `comGate_comGate` - `gpWebpay_crd` - `payPal_paypal` - `przelewy24_przelewy24` - ... ----- ## Dynamic Remarketing kvik.shop shop provides data layer variables useful for dynamic remarketing. [More about dynamic remarketing in Google's article][googleDynamicRemarketing]. ```javascript dataLayer.push({ 'ecommerceProductIds': ['iq885y4708nf9r86f2v6', '7b837biebu1uc1oojoc5'], 'ecommercePageType': 'category', 'ecommerceTotalValue': '123.23' }); ``` ### Variable 'ecommerceProductIds' - An array of product IDs displayed on a particular page. - It is an equivalent for `product_id` from [Google's article about dynamic remarketing][googleDynamicRemarketing]. - Variable is available only when there are any products on a page. - Product ID is up to 20 characters long alphanumeric string. - Same product IDs are filled in XML product feeds for Google Shopping and other services. ### Variable 'ecommercePageType' - Variable is available on all pages. - It provides type of the page according to Google's list - It is an equivalent for `page_type` from [Google's article about dynamic remarketing][googleDynamicRemarketing]. - Possible values of `ecommercePageType`: - Homepage = `home` - Category page = `category` - Product detail page = `product` - Shopping cart page = `cart` - Search results page = `searchresults` - Purchase confirmation page = `purchase` - All other pages = `other` ### Variable 'ecommerceTotalValue' - Summarized price of all products displayed on a particular page. - The price is without Value Added Tax and without shipping, rounded to 2 decimals. - On the product detail page, it is the price of the one product. - On the pages of shopping cart, it is summarized price of all products in the cart. - On the purchase confirmation page, it is summarized price of all products in the order. ----- ## GA4 Recommended Events https://support.google.com/analytics/answer/9267735?hl=en&ref_topic=9756175 ### Event 'login' ### Event 'sign_up' ### Event 'search' ### Event 'add_payment_info' ### Event 'add_shipping_info' ### Event 'add_to_cart' ### Event 'begin_checkout' ### Event 'purchase' ### Event 'remove_from_cart' ### Event 'view_cart' ### Event 'view_item' ### Event 'view_item_list' ### Event 'view_promotion' ----- ## Custom Events ### Event 'emptyOutCart' ```javascript gtag('event', 'emptyOutCart', { 'send_to': ['default', 'G'] }); ``` - This custom additional event is fired when a customer removes the last product from the cart or when he empties out the whole cart at once by clicking on "Empty out cart" button. - This event is sent to Universal Analytic and GA4. ### Event 'consent_default' ```javascript dataLayer.push({'event': 'consent_default'}); ``` - This custom additional event is fired when the shop uses the [**Cookie Consent Manager** module](#user-cookie-consents-consent-mode). ----- ## Google Ads Enhanced Conversions About enhanced conversions: https://support.google.com/google-ads/answer/9888656. kvik.shop shop adds ehnanced conversions variable to the purchase confirmation page. ```javascript gtag('set', 'user_data', { "email": "info@kvik.shop", "phone_number": "00420277277973", "address": { "first_name": "George", "last_name": "McFly", "street": "Technologická 376/5", "city": "Ostrava", "postal_code": "70800", "country": "CZ" } }); ``` If you want to use these enhanced conversion data, you have to add `{'allow_enhanced_conversions': true}` to the config line to your global site tag that triggers across all pages in GTM. ```javascript gtag('config', 'AW-CONVERSION_ID', {'allow_enhanced_conversions': true}); ``` To know more, visit Google Ads Help: Set up enhanced conversions manually with the global site tag: https://support.google.com/google-ads/answer/9888145. ---- ## Universal Analytics – Enhanced Ecommerce > Google Analytics Enhanced Ecommerce enables product impression, promotion, and sales data to be sent with any of your Google Analytics pageviews and events. > You can use pageviews to track product impressions and product purchases; and use events to track checkout steps and product clicks. More information about Enhanced Ecommerce in [Google's documentation][googleEnhancedEcommerce]. Google defines these several types of Enhanced Ecommerce events. Below is a list of what events are implemented on kvik.shop shop. Implemented events: - [Product Impressions](#product-impressions) - [Product Detail Impression](#product-detail-impressions) - [Add / Remove from Cart](#addremove-from-cart-events) - [Checkout](#checkout-event) - [Purchase](#purchase) Not implemented events: - [Product Click](#product-click-event) - [Promotion Impressions](#promotion-impressions) - [Promotion Click](#promotion-click-event) - [Refund](#refunds) ### Common information - Prices in a `price` property **doesn't include Value Added Tax and shipping** in all places. - There is `metric1` property in product object which contains price of the product **with Value Added Tax**. - There is `dimension1` property in product object which contains type of the product if it is defined in the shop. - Product ID is up to 20 characters long alphanumeric string. - Same product IDs are filled in XML product feeds for Google Shopping and other services. - There is always present `currencyCode` property in all Enhance Ecommerce events. ### Product Impressions - It is implemented for category page and for collections of produtcs on product detail (like accesories or other related products for the main product). - There is `metric1` property in product object which contains price of the product **with Value Added Tax**. ```javascript dataLayer.push({ "ecommerce": { "impressions": [{ "name": "Autobaterie Galaxy Silver 55 Ah12 V", "id": "ketl73lms4woydfxdzdb", "price": "1295.87", "brand": "MDtools", "category": "Univerzální díly/Autobaterie/Galaxy Silver", "list": "Univerzální díly", "position": 1, "metric1": "1568" }, { "name": "Autobaterie Galaxy Silver 60Ah 12V", "id": "275kfjbwhqnlxny4ze97", "price": "1547.93", "brand": "MDtools", "category": "Univerzální díly/Autobaterie/Galaxy Silver", "list": "Univerzální díly", "position": 2, "metric1": "1873" }], "currencyCode": "CZK" } }); ``` ### Product Detail Impressions - Implemented on product detail page. - There is `metric1` property in product object which contains price of the product **with Value Added Tax**. ```javascript dataLayer.push({ "ecommerce": { "detail": { "products": [ { "name": "Sada brzdových destiček, kotoučová brzda TRW COTEC GDB1330", "id": "tmw1oiqt8f9x1uo0yp3k", "price": "338.02", "brand": "TRW", "category": "Autodíly/Brzdový systém/Sada brzdových destiček, kotoučová brzda", "position": 1, "metric1": "409", "dimension1": "Sada brzdových destiček, kotoučová brzda" } ] }, "currencyCode": "CZK" } }); ``` ### Add/Remove from Cart Events - Implemented. - There is also custom additional [event 'emptyOutCart'](#event-emptyoutcart) which is fired when a customer removes the last product from the cart or when he empties out the whole cart at once by clicking on "Empty out cart" button. - In the first case, the ['emptyOutCart' event](#event-emptyoutcart) is fired together with 'removeFromCart' event. - There is `metric1` property in product object which contains price of the product **with Value Added Tax**. ```javascript dataLayer.push({ "event": "addToCart", "ecommerce": { "add": { "products": [{ "name": "Autobaterie Galaxy Silver 55 Ah12 V", "id": "ketl73lms4woydfxdzdb", "price": "1295.87", "quantity": 1, "brand": "MDtools", "category": "Univerzální díly/Autobaterie/Galaxy Silver", "metric1": "1568" }] }, "currencyCode": "CZK" } }); ``` ### Checkout Event - Implemented on purchase confirmation page. - Supports 2 steps. - In the 1st step, the `option` attribute contains [country code][countryCodeIso] of the country where the order have to be delivered. - In the 2nd step, the `option` is not present. Second step is on checkout confirmation page ( when `'pageType': 'shoppingCartRecapitulation'`). ```javascript dataLayer.push({ "event": "checkout", "ecommerce": { "checkout": { "actionField": { "step": 1, "option": "CZ" }, "products": [{ "name": "Autobaterie Galaxy Silver 55 Ah12 V", "id": "ketl73lms4woydfxdzdb", "price": "1295.87", "quantity": 1, "brand": "MDtools", "category": "Univerzální díly/Autobaterie/Galaxy Silver", "metric1": "1568" }] }, "currencyCode": "CZK" } }); ``` ### Purchase - Implemented. - Property `revenue` contains total transaction value including tax and shipping. - Property `shipping` is an amount excluding Value Added Tax. - Property `tax` is sumarzied tax of all products and shipping. - Property `affiliation` contains domain name of the shop. - Property `id` in `actionField` is **code** of the order which may contain alpha-numeric characters. - There is `metric1` property in product object which contains price of the product **with Value Added Tax**. ```javascript dataLayer.push({ "ecommerce": { "currencyCode": "CZK", "purchase": { "actionField": { "id": "8", "affiliation": "demo.kvik.shop", "revenue": "31396", "tax": "5448.9", "shipping": "107.43" }, "products": [{ "name": "Autobaterie Galaxy Silver 55 Ah12 V", "id": "ketl73lms4woydfxdzdb", "price": "25839.67", "quantity": 1, "brand": "MDtools", "category": "Univerzální díly/Autobaterie/Galaxy Silver", "metric1": "31266" }] } } }); ``` ### Product Click Event - It is not implemented on the shop because there is no difference between [Product Click](#event-product-click) and [Product Detail Impressions](#event-product-detail-impressions). - When you click on a product on the shop, it displays the product detail page so the shop system intentionally supports [Product Detail Impressions](#event-product-detail-impressions) event only. ### Promotion Impressions - It is currently not implemented on the shop. - It may be implemented in the future for banners displayed on the shop homepage. ### Promotion Click Event - It is currently not implemented on the shop. - It may be implemented in the future for banners displayed on the shop homepage. ### Refunds - It is not implemented on the shop because the shop system doesn't have a refund feature which can be used directly by customers on the shop frontend. [googleDataLayer]: https://developers.google.com/tag-manager/devguide#datalayer [googleDynamicRemarketing]: https://support.google.com/tagmanager/answer/7067288?hl=en [googleEnhancedEcommerce]: https://developers.google.com/tag-manager/enhanced-ecommerce [uuid]: https://en.wikipedia.org/wiki/Universally_unique_identifier [languageCodeIso]: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes [currencyCodeIso]: https://en.wikipedia.org/wiki/ISO_4217 [countryCodeIso]: https://en.wikipedia.org/wiki/ISO_3166-1