catalog: product page microdata

[pdpinch]

As a Facebook user, I'd like to see ads for xPRO courses based on my interests in course topics.

Facebook has a tool called catalogs which helps Facebook inventory the products that your organization is trying to promote on Facebook. https://www.facebook.com/business/help/1275400645914358?id=725943027795860

The product requires some additional metadata on each for product page for the catalog to pull from.

Acceptance Criteria:

On product pages, add the following metatags:

• [x] og:title (exists)
• [ ] og:description (needs a value)
• [x] og:url (exists)
• [ ] og:image => URL for thumbnail
• [ ] product:brand -> always "xPro"
• [ ] product:availability -> always "in stock"
• [ ] product:condition -> always "new"
• [ ] product:price:amount -> product price; this is the FB param for ViewContent: value
• [ ] product:price:currency -> always "USD"; this is the FB param for ViewContent: currency
• [ ] product:retailer_item_id -> product readable id; this is the FB param for ViewContent: content_ids
• [ ] product:category -> always 317

and on the checkout page, add the following values to the dataLayer push event:

• [ ] 'course-id': coursewareId, // example: "program-v1:xPRO+MLx" - same value as sent for the purchase
• [ ] 'course-price': "course cost" // example: "2149"**

for example, on https://xpro.mit.edu/programs/program-v1:xPRO+MLx/ tags would be (in addition to existing

<meta property="og:image" content="https://xpro-app-production.s3.amazonaws.com/images/ML-image-2.2e16d0ba.fill-870x500.jpg">
<meta property="product:brand" content="xPro">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:price:amount" content="2149">
<meta property="product:price:currency" content="USD">
<meta property="product:retailer_item_id" content="program-v1:xPRO+MLx">
<meta property="product:category" content="317">

[asadiqbal08]

@pdpinch can you point out the possible value for og:description ?

[pdpinch]

I think we could use either the description field, found under the promote tab in the CMS, or we could use the program/course subhead.

Let me ask some others and get back to you.

[pdpinch]

Please use the description field from the promote tab in the CMS. This is currently empty in production, but the marketing team has committed to populating it.

[briangrossman]

@asadiqbal08

This is mostly good, but there were a couple issues. I've attached an image below with details about what didn't work.

• product:price:amount didn't have a value associated with it
• the data layer push event doesn't seem to be working. There are some details in the image below:

[asadiqbal08]

@briangrossman After investigating it, Can you confirm the follow 2 things about the point that you indicated above.

• Do you have set the current price for product ? as there is condition over amount page.product.current_price
• Do you have enabled the gtmTrackingID over the checkout page ? as the Data Push Layer event is initiated under this condition

  if (SETTINGS.gtmTrackingID) {
        dataLayer.push({
          event:            "purchase",
          transactionId:    payload.transaction_id,
          transactionTotal: payload.transaction_total,
          productType:      payload.product_type,
          coursewareId:     payload.courseware_id,
          referenceNumber:  payload.reference_number,
          eventTimeout:     2000,
          eventCallback:    () => {
            setTimeout(() => {
              window.location = url
            }, 1500)
          }
        })

  Please let me know about it. Thanks

[briangrossman]

@asadiqbal08

I'm not sure I understand your questions completely.

• Do you have set the current price for product ? as there is condition over amount page.product.current_price

I don't understand what you mean by _there is condition over amount page.product.current_price_ Are you saying there's some kind of condition that makes it not possible to retrieve the value?

• Do you have enabled the gtmTrackingID over the checkout page ? as the Data Push Layer event is initiated under this condition

I'm not sure about where and if that value is enabled. Peter confirmed that it should be enabled throughout the entire side and it looks like @ahmed-belal has done some work related to it in the past. Maybe he has some insights?

[ahmed-belal]

@briangrossman @asadiqbal08

• GTM is enabled when the GTM_TRACKING_ID environment variable is set (I have mine set to GTM-KJHRV6K, I don't remember exactly if this is the staging container or something I made on my own account 🤷‍♂️ )
• This is enabled site-wide, so you shouldn't have to enable it per-page anywhere
• The data layer push event code will need to be updated to include these new values

[asadiqbal08]

Do you have set the current price for product ? as there is condition over amount page.product.current_price

I don't understand what you mean by there is condition over amount page.product.current_price Are you saying there's some kind of condition that makes it not possible to retrieve the value?

@briangrossman I just mean, there should be some current_price associated with that product else it will not render in meta tags.

[briangrossman]

@asadiqbal08 In terms of the price, here's an example: https://xpro.mit.edu/courses/course-v1:xPRO+SysEngx1/ There seems to be a price associated with that course ($949). It is displayed on the page:

Ideally you could use the same logic for getting the price as what is currently used on the page already. I imagine since the price is associated with the product, but the product is associated with the course run (not the course), it would take a little work.

Here's the missing data in the HTML:

Thanks!

[asadiqbal08]

• So initially the condition over price was pointing to programs only that's why I am getting the price in metatags but not the @briangrossman as he is visiting a course while I am looking around the program page. So sorry, I missed to add the corresponding conditions for external course page and courses in price meta tag before.

• Secondly, The Sam's code suggestion here was not actually before mentioned in the ticket's acceptance criteria. Under the ticket, it was explicitly mentioned to add course-id and course-price in the following place instead as Sam pointed now to put under window's datalayer.

PR is up now for review as per new A/C by Sam.

[briangrossman]

Closing