Product: Quick View

Key: product-quick

Some eCommerce sites allow user, when looking at a list of products, normally on a search or category page, to view a product's details as a popup.

Note that the page type will be set to "prod" and a tracking call with be run.

We can track this event as if it was a view of a product page as follows:

{
  "product-quick": {
    "doIf": CONDITIONALS,
    "waitFor": CONDITIONALS,
    "delay": INTEGER,
    "data": {
      "product": {
        "id": SET_TO_VALUE,
        "name": SET_TO_VALUE,
        ...
      }
    }
  }
}

doIf

Conditionals used to test if we should be waiting for a product quick view on this page veiw.

The example below looks at the page type and only tracks product quick view if the user is on a category or search page.

"doIf": {
  "lookAt": "state.page.type",
  "tests": "$value == 'cat' || $value == 'srch'"
},

waitFor

Conditionals that test if a product quick view is currently shown.

The example below waits for both the container to be displayed (looking at the CSS display property), and then for the ".add_to_cart_btn" to exist. In this scenario the inner content of the product quick view .

"waitFor": [
  {
    "lookAt": {
      "type": "selector",
      "value": "#quick_view_container",
      "filters": "display"
    },
    "tests": "$value == 'block'"
  },
  {
    "lookAt": {
      "type": "selector",
      "value": "#quick_view_container .add_to_cart_btn"
    },
    "tests": "$value.length > 0"
  }
]

delay

If specified, scraping is not done until N milliseconds after the "waitFor" has passed.

data

These work the same as regularly setting a value. The keys are:

• product.name
• product.id
• product.sku
• product.price
• product.image
• product.url
• product.category.name
• product.category.id

For example:

{
  "product-quick": {
    "doIf": ...,
    "waitFor": ...,
    "data": {
      "product.name": {
        "to": {
          "type": "selector",
          "value": "#quick_view .product-name",
          "filters": "text"
        }
      },
      ...
    }
  }
}

See Setting a Value.