Playground

From markup to vendor, live.

Change the component, its data or the mapping, and watch every view and click turn into a GA4 event.

Component

Highlight

Event

Waiting for the first event…

Mapping

editable

{
  "product": {
    "view": {
      "name": "view_item",
      "data": {
        "map": {
          "currency": {
            "value": "EUR"
          },
          "value": "data.price",
          "items": {
            "set": [
              {
                "map": {
                  "item_name": "data.name",
                  "item_variant": "data.taste",
                  "price": "data.price",
                  "quantity": {
                    "value": 1
                  }
                }
              }
            ]
          }
        }
      }
    },
    "add": {
      "name": "add_to_cart",
      "data": {
        "map": {
          "currency": {
            "value": "EUR"
          },
          "value": "data.price",
          "items": {
            "set": [
              {
                "map": {
                  "item_name": "data.name",
                  "item_variant": "data.taste",
                  "price": "data.price",
                  "quantity": {
                    "value": 1
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

{
  "product": {
    "view": {
      "name": "view_item",
      "data": {
        "map": {
          "currency": {
            "value": "EUR"
          },
          "value": "data.price",
          "items": {
            "set": [
              {
                "map": {
                  "item_name": "data.name",
                  "item_variant": "data.taste",
                  "price": "data.price",
                  "quantity": {
                    "value": 1
                  }
                }
              }
            ]
          }
        }
      }
    },
    "add": {
      "name": "add_to_cart",
      "data": {
        "map": {
          "currency": {
            "value": "EUR"
          },
          "value": "data.price",
          "items": {
            "set": [
              {
                "map": {
                  "item_name": "data.name",
                  "item_variant": "data.taste",
                  "price": "data.price",
                  "quantity": {
                    "value": 1
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

Result

gtag