Create tracker

Create a layout for create or edit tracker. This will use a tracker and tracker-metric widgets so that it can be mapped to a tracker and specific metric we want to use. We can used any of the layout widgets to add custom text/image, etc.

Launching the layout page

Launching the create/edit tracker layout. In the example below, we are launching campaign-apply layout. This layout will used tracker widget to map to a tracker so that we can create/edit the dispatch.

• hideAppBar flag is set to true. This tell the layout launcher to not include an AppBar in the main layout. The tracker widget will have its own app bar.

      {
        "component": "text",
        "text": "Apply now",
        "styles": {
          "paddingTop": "18px"
        },
        "onClick": {
          "target": "layout",
          "options": {
            "id": "campaign-apply",
            "hideAppBar": true,
            "parameters": {
              "campaignId": "{dispatch.id}"
            }
          }
        }
    }

Create/edit tracker layout

Create/edit layout page. In this example, the tracker we are using is campaign-apply and one of the metric we used is message.

• The first layout widget must be a tracker widget
• The child of the tracker layout should be a grid so that you can add other layout widgets. The children of the grid can be anything
• One or more children of the grid mentioned above should be a tracker-metric. Tracker metric widget should have info about the tracker that it is mapping to as well as the metric.

{
  "data": {
    "sources": [
      {
        "id": "campaign",
        "kind": "dispatch",
        "query": "id:{data.campaignId}"
      }
    ]
  },
  "ux": {
    "component": "tracker",
    "options": {
      "tracker": "campaign-apply",
      "showActionButton": false,
      "showDate": false
    },
    "styles": {
      "backgroundColor": "#F9E1D2",
      "padding": "0px 20px 40px 20px",
      "text": {
        "color": "#767676"
      }
    },
    "child": {
      "component": "grid",
      "children": [
        {
          "component": "text",
          "text": "Apply for campaign",
          "styles": {
            "root": {
              "fontWeight": "600",
              "fontSize": "32px",
              "color": "#9569be",
              "fontFamily": "RecoletaAltSemiBold"
            }
          }
        },
        {
          "component": "text",
          "text": "Be Heard. Be Seen. Be Social",
          "styles": {
            "fontSize": "16px",
            "color": "#232428",
            "marginTop": "20px"
          }
        },
        {
          "component": "text",
          "text": "{$source.campaign.values.productName}",
          "styles": {
            "fontFamily": "RecoletaAltSemiBold",
            "fontSize": "16px",
            "color": "#9569be",
            "marginTop": "35px",
            "fontWeight": 600
          }
        },
        {
          "component": "text",
          "text": "{$source.campaign.dispatch.displayName}",
          "styles": {
            "fontFamily": "RecoletaAltSemiBold",
            "fontSize": "16px",
            "marginTop": "10px",
            "fontWeight": 600
          }
        },
        {
          "component": "text",
          "text": "{$source.campaign.values.description}",
          "styles": {
            "fontSize": "16px",
            "marginTop": "10px"
          }
        },
        {
          "component": "text",
          "text": "More information about the product",
          "styles": {
            "fontSize": "16px",
            "color": "#9569be",
            "marginTop": "10px"
          }
        },
        {
          "component": "grid",
          "direction": "row",
          "styles": {
            "marginTop": "10px"
          },
          "children": [
            {
              "component": "text",
              "text": "Payment per review",
              "span": "expanded",
              "styles": {
                "fontSize": "16px"
              }
            },
            {
              "component": "text",
              "text": "{$source.campaign.values.productOffered | numeral:$0.00}",
              "styles": {
                "fontSize": "16px",
                "textAlign": "right",
                "width": "100px"
              }
            }
          ]
        },
        {
          "component": "grid",
          "direction": "row",
          "styles": {
            "marginTop": "10px"
          },
          "children": [
            {
              "component": "text",
              "text": "Application deadline",
              "span": "expanded",
              "styles": {
                "fontSize": "16px"
              }
            },
            {
              "component": "text",
              "text": "{$source.campaign.values.applicationDeadline | date:MMM D, yyyy}",
              "styles": {
                "fontSize": "16px",
                "textAlign": "right",
                "width": "120px"
              }
            }
          ]
        },
        {
          "component": "grid",
          "direction": "row",
          "styles": {
            "marginTop": "10px"
          },
          "children": [
            {
              "component": "text",
              "text": "Review submission deadline",
              "span": "expanded",
              "styles": {
                "fontSize": "16px"
              }
            },
            {
              "component": "text",
              "text": "{$source.campaign.values.submissionDeadline | date:MMM D, yyyy}",
              "styles": {
                "fontSize": "16px",
                "textAlign": "right",
                "width": "120px"
              }
            }
          ]
        },
        {
          "component": "grid",
          "direction": "row",
          "styles": {
            "marginTop": "10px"
          },
          "children": [
            {
              "component": "text",
              "text": "Sample provided",
              "span": "expanded",
              "styles": {
                "fontSize": "16px"
              }
            },
            {
              "component": "text",
              "text": "Yes",
              "condition": {
                "rule": "$source.campaign.values.productSample is true"
              },
              "styles": {
                "fontSize": "16px",
                "textAlign": "right",
                "width": "100px"
              }
            },
            {
              "component": "text",
              "text": "No",
              "condition": {
                "rule": "$source.campaign.values.productSample not true"
              },
              "styles": {
                "fontSize": "16px",
                "textAlign": "right",
                "width": "100px"
              }
            }
          ]
        },
        {
          "component": "text",
          "text": "Your message to the brand",
          "styles": {
            "fontSize": "16px",
            "marginTop": "25px"
          }
        },
        {
          "component": "tracker-metric",
          "options": {
            "tracker": "campaign-apply",
            "metric": "message",
            "title": ""
          }
        },
        {
          "component": "tracker-metric",
          "options": {
            "tracker": "campaign-apply",
            "metric": "terms"
          }
        },
        {
          "component": "text",
          "description": "launch url",
          "text": "TGD community standards",
          "onClick": {
            "target": "openBrowser",
            "options": {
              "url": "https://theglamdaily.com/community-standards/"
            }
          },
          "styles": {
            "fontSize": "16px",
            "color": "#9569be"
          }
        },
        {
          "component": "media",
          "kind": "image",
          "src": "https://weave-io-files.s3.amazonaws.com/files/org/bb446c3d-c3a6-4cde-ae43-a97b51f15029/cFVtZXoILAkmtGjSxeHJsySMiXCrOz184f54c383aa5e143858a3f6b98bbf93/TGD_Asset_more-like-you_star-8.png",
          "styles": {
            "image": {
              "fit": "contain",
              "width": 120,
              "height": 120,
              "alignment": "center"
            },
            "paddingTop": 20
          }
        }
      ]
    }
  }
}