view

A view event should be triggered whenever a piece of content slides into the users viewport. Assuming that you are showing 8.SET-Custom product set data, that event should look like the following example:

{
  "type": "view",
  "view": {
    "type": "customSet",
    "customSet": {
      "id": "1b3de0bd-95c6-435a-8bb9-f4cae0160388"
    }
  },
  "context": [
    {
      "type": "user",
      "user": {
        "id": "c57a43f7-eefc-462b-b5a8-0ef421e90f67"
      }
    }
  ]
}

A view event is identified by its type view and an additional view property containing specific information about the content being viewed. This property should in turn have a type and content-specific payload.

8.SIMILAR - similarProducts

A view event with type similarProducts must contain a similarProducts property containing the id of the product the content was requested for.

In our example we request content for 8S-DEMO-Polohemd-1 and also use that as the id in the tracking event.

GraphQL query

query {
  product(id: "8S-DEMO-Polohemd-1") {
    similarProducts(first: 8) {
      edges {
        node {
          id
        }
      }
    }
  }
}

GraphQL response

{
  "data": {
    "product": {
      "similarProducts": {
        "edges": [
          ...
        ]
      }
    }
  }
}

Event payload to send

{ 
  ...,
  "view": {
    "type": "similarProducts",
    "similarProducts": {
      "id": "8S-DEMO-Polohemd-1",
    }
  },
  ...
}

8.SET - matchingProductClusters

A view event with type matchingProductClusters must contain a matchingProductClusters property containing the id of the product the content was requested for.

In our example we request content for 8S-DEMO-Polohemd-1 and also use that as the id in the tracking event.

GraphQL query

query {
  product(id: "8S-DEMO-Polohemd-1") {
    matchingProductClusters(first: 5) {
      edges {
        node {
          products(first: 3) {
            edges {
              node {
                id
              }
            }
          }
        }
      }
    }
  }
}

GraphQL response

{
  "data": {
    "product": {
      "matchingProductClusters": {
        "edges": [
          {
            "node": {
              "products": {
                "edges": [
                  ...
                ]
              }
            }
          },
          {
            "node": {
              "products": {
                "edges": [
                  ...
                ]
              }
            }
          },
          {
            "node": {
              "products": {
                "edges": [
                  ...
                ]
              }
            }
          },
          {
            "node": {
              "products": {
                "edges": [
                  ...
                ]
              }
            }
          },
          {
            "node": {
              "products": {
                "edges": [
                  ...
                ]
              }
            }
          }
        ]
      }
    }
  }
}

Event payload to send

{ 
  ...,
  "view": {
    "type": "matchingProductClusters",
    "matchingProductClusters": {
      "id": "8S-DEMO-Polohemd-1",
    }
  },
  ...
}

8.SET Custom - customSet

A view event with type customSet must contain a customSet property containing the id of the viewed product set.

The GraphQL API response includes the id of the set depending on the query you use:

• data.product.customSets.edges[].node.id

• data.customSet.id

GraphQL response (product)

{
  "data": {
    "product": {
      "customSets": {
        "edges": [
          {
            "node": {
              "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
              "title": "8SELECT Fashion for everyday",
              "description": "This is a demo set. It is here to preview the 8.SET Custom widget.",
              "images": {
                "edges": [
                  ...
                ]
              },
              "products": [
                ...
              ]
            }
          }
        ]
      }
    }
  }
}

GraphQL response (customSet)

{
  "data": {
    "customSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
      "title": "8SELECT Fashion for everyday",
      "description": "This is a demo set. It is here to preview the 8.SET Custom widget.",
      "images": {
        "edges": [
          ...
        ]
      },
      "products": [
        ...
      ]
    }
  }
}

Event payload to send

{ 
  ...,
  "view": {
    "type": "customSet",
    "customSet": {
      "id": "e3bcaf66-5037-4d7b-be4a-8c571a6fb299",
    }
  },
  ...
}