---
schema_version: "1"
id: 9e508b70caaf990097ad36c7ca08604f79b540f62c5321e1513dcee2e550b57b
title: Google Analytics 4 Page Types in Data 360
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/data-cloud/data-cloud-int/guides/c360-a-web-connector-ga4-page-types.md
canonical_url: https://developer.salesforce.com/docs/data/data-cloud-int/guide/c360-a-web-connector-ga4-page-types.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f4ca78700fc085684727aced27e54968b858e466ae55aa1a36daf9a28a2bbb56
products:
  - Data 360 Integration Guide
  - Data 360 Developer Documentation
---
# Google Analytics 4 Page Types in Data 360

Use the Data 360 Website Connector and Google Analytics 4 (GA4) to automatically track real-time user engagement by Page Type.

| Available in:                               |
| :------------------------------------------ |
| Data Cloud, Marketing Cloud Personalization |

## Required Permissions

| Task                          | Permission                                                           |
| :---------------------------- | :------------------------------------------------------------------- |
| Configure Web SDK Integration | Data Cloud Admin OR Marketing Cloud Personalization Salesforce admin |

## Overview

Use the Page Type feature with the Salesforce Web SDK to capture page-specific metadata via Google Analytics 4 (GA4) and Google Tag Manager (GTM). By pushing a `pageType` object and `contextualAttributes` to a custom data layer called `sfWebInteractionsDataLayer`, the Salesforce Web SDK’s GA4 module automatically identifies and tracks the context of a user’s site navigation.

Use these key capabilities of the feature to:

- Standardized Context Mapping: Categorize diverse URL structures into unified page types.
- Seamless GA4/GTM Interoperability: Leverage your existing Google Tag Manager logic to push page type data.
- Single-Page Application Support: Support Multi-Page Applications (MPA) and Single-Page Applications (SPA) by listening for a data layer object push.

To push to the data layer, call `sfWebInteractionsDataLayer.push()` with a page type object. You call `sfWebInteractionsDataLayer.push()` when an event invokes a trigger (such as a page navigation event). Add the `sfWebInteractionsDataLayer.push()` code to GTM with a custom HTML tag that specifies the appropriate trigger.

## Configure Page Types

Configure GTM to push page type and contextual attribute data to the Salesforce Web SDK. Create a GTM script that pushes a configuration object to the `sfWebInteractionsDataLayer`.

### Configuration Object Field Specifications

| Field                    | Type    | Required | Example | Description                                                                                                 |
| :----------------------- | :------ | :------: | :------ | :---------------------------------------------------------------------------------------------------------- |
| **pageType**             | string  |   Yes    | `cart`  | Defines the current page; see [Salesforce Page Types](#page-types).                                         |
| **contextualAttributes** | object  |    No    | `{...}` | Provides extra metadata related to the specific page context.                                               |
| **sendEvent**            | boolean |    No    | `true`  | Sends a `page_view` event to Data 360; see [GA4 Event Mapping](https://developer.salesforce.com/docs/data/data-cloud-int/guide/c360-a-web-connector-ga4-events-mapping.md). |

### Provide Configuration to the Data Layer Method

Provide the configuration as an argument to the `sfWebInteractionsDataLayer.push()` method. Enclose this method inside a `<script>` tag. For example:

```javascript
<script>
/**
 * Pushes a page-view object to the sfWebInteractionsDataLayer.
 */
sfWebInteractionsDataLayer.push({
  // Defines the category of the current page for mapping logic
  pageType: "product",

  // Object containing metadata specific to this page view
  contextualAttributes: {
    // 1. Static Attribute: A simple hardcoded string.
    pageTypeAttr: "product-pageTypeAttr",

    // 2. DOM Selector Resolver: Automatically scrapes the text content
    // of the first <h2> tag found on the page.
    pageTypeAttr2: SalesforceInteractions.resolvers.fromSelector("h2"),

    // 3. Simple Resolver: Uses a function to return a value.
    // .bind() ensures the function executes within the SDK's resolver context.
    pageTypeAttr3: SalesforceInteractions.util.resolveWhenTrue.bind(
      function () {
        return "product-pageTypeAttr2";
      },
    ),

    // 4. Asynchronous/Conditional Resolver:
    // This waiting function waits for a specific condition to be met before returning data.
    pageTypeAttrAsync: SalesforceInteractions.util.resolveWhenTrue.bind(
      function () {
        // Retrieves the standard Google Tag Manager dataLayer array.
        var events = SalesforceInteractions.getValueFromNestedObject("window.dataLayer");

        // Condition: Only return 'true' once the dataLayer has more than three events.
        // (Useful for waiting until third-party tags or specific events have loaded.)
        if (events && events.length > 3) {
          return true;
        } else {
          return false;
        }
      },
      undefined, // Context (defaults to window)
      1000,      // Timeout: Stop trying after 1000ms (1 second)
      50,        // Interval: Check the condition every 50ms
    ),
  },

  // Boolean flag to trigger an immediate 'page_view' event to the server
  sendEvent: true,
});
</script>
```

### Configure a Google Tag Manager (GTM) Tag

In Google Tag Manager:

1. Go to your workspace and create a tag.
2. Under **Tag configuration**, select **Custom HTML**.
3. Paste your `sfWebInteractionsDataLayer.push()` method into the code editor. Enclose the method in a `<script>` tag.
4. Configure one or more triggers to push this tag on your page. Use **History Change** for Single-Page Application triggers.

## Page Types

Page Types establish what pages on a website and what data on those pages you want Data 360 to track. You can apply a single `pageType` configuration to multiple pages on your website.

### Common Page Types

Map page types depending on your business vertical, the objective of your website, and the type of content your website serves.

#### General Page Types

You can define these general page types on any website.

| Page Type        | Description                                            |
| :--------------- | :----------------------------------------------------- |
| `home`           | The website's homepage                                 |
| `blog`           | The blog's main index or homepage                      |
| `blog_detail`    | A specific blog post or article page                   |
| `search`         | The initial search entry page                          |
| `search_results` | The page showing search query results                  |
| `register`       | The user account registration page                     |
| `sign_in`        | The user login page                                    |
| `account`        | The user's account overview or profile page            |
| `error_page`     | A landing page for errors (for example, 404 Not Found) |

#### Commerce Page Types

You can define these page types for a commerce website.

| Page Type            | Description                                                   |
| :------------------- | :------------------------------------------------------------ |
| `product_detail`     | A product detail page                                         |
| `brand`              | A brand detail page                                           |
| `department`         | A department overview page                                    |
| `category`           | A category page, sometimes referred to as a product list page |
| `cart`               | The shopping cart                                             |
| `checkout`           | The checkout pages                                            |
| `order_confirmation` | The order confirmation page                                   |

#### B2B Page Types

You can define these page types for a B2B website.

| Page Type  | Description                                                                                     |
| :--------- | :---------------------------------------------------------------------------------------------- |
| `product`  | A specific product offering                                                                     |
| `solution` | A group of offerings, high-level capability, or industry                                        |
| `article`  | A details page for articles (for example, White Papers or Technical Specs)                      |
| `event`    | A details page for events (for example, Webinars or Conferences)                                |
| `learning` | A details page for learning content (for example, Classes, Playbooks, Forums, or Documentation) |

## Troubleshooting

If you encounter errors, define `sfWebInteractionsDataLayer` before initializing Google Tag Manager. For example:

```javascript
<script>
  sfWebInteractionsDataLayer = sfWebInteractionsDataLayer || [];
</script>

<!-- From Google Tag Manager documentation -->
<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 -->
```

For standard Google Tag implementations, define `sfWebInteractionsDataLayer` before initializing the Google Tag. For example:

```javascript
<script>
  sfWebInteractionsDataLayer = sfWebInteractionsDataLayer || [];
</script>

<!-- From Google Tag (gtag.js) documentation -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>

<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments)
  };

  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>
<!-- End Google Tag (gtag.js) -->
```