qt-support commented 3 years ago

This Github issue is synchronized with Zendesk:

Ticket ID: #12574

Publisher URL : https://www.prabhatkhabar.com/ Client Type: Custom CMS: https://prabhatkhabar.quintype.com/

Issue:

Client followed the below documentation to enable the visual stories and sees a blank page for amp visual stories:

https://developers.quintype.com/quintype-amp/tutorial-visual-stories.html

Issue could be seen at: https://beta.prabhatkhabar.com/ampstories/entertainment/shehnaz-gill-bold-photoshoot-making-fans-crazy-viral-on-social-media-bigg-boss-contestant-hot-and-bold-photos-div

Please help on this.

Expected behaviour

Visual AMP stories should show up fine on the frontend.

Screenshot or Video

anish-q commented 3 years ago

@sramalin Can we get into a call with them and help out?

ags1773 commented 3 years ago

@qt-support They just have to update @quintype/framework to latest by running npm i @quintype/framework@latest, It'll work, tested on local. We missed this point in our documentation, will add it.

ags1773 commented 3 years ago

Also, they might come back saying they're getting following validation error on visual story

Tag 'div' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-bookend', 'amp-story-page'].

This is because they're adding amp-sticky-ad on all story templates via top slot. A visual story can't have amp-sticky-ad. To solve this, they'll need to make a change here

change this:

export const TopSlot = ({ story, config }) => {
  return (
    <Layout story={story} config={config}>
      <Head>
        <script
          async={undefined}
          custom-element="amp-sticky-ad"
          src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
        />
      </Head>
      <amp-sticky-ad layout="nodisplay">
        {/* Below data-slot is dummy. Pass Prabhat Khabar's story page sticky ad slot to data-slot */}
        <amp-ad width="320" height="50" type="doubleclick" data-slot="/60483537/PK_AMP_BTM_STICKY/"></amp-ad>
      </amp-sticky-ad>
    </Layout>
  );
};

to this

export const TopSlot = ({ story, config }) => {
  if (story["story-template"] === "visual-story") return null;
  return (
    <Layout story={story} config={config}>
      <Head>
        <script
          async={undefined}
          custom-element="amp-sticky-ad"
          src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"
        />
      </Head>
      <amp-sticky-ad layout="nodisplay">
        <amp-ad width="320" height="50" type="doubleclick" data-slot="/60483537/PK_AMP_BTM_STICKY/"></amp-ad>
      </amp-sticky-ad>
    </Layout>
  );
};

Sowbagya-lakshmi commented 3 years ago

@ags1773 client has come back with the following queries: 1) FB share showing error. 2) Ads calls are not getting triggered, below is the code.

Will appreciate the quick response.

Head script

body

Please advise on this.

ags1773 commented 3 years ago

@Sowbagya-lakshmi

Ads issue: I checked the html, it looks fine. Ads are inserted dynamically, and there need to be at least 7 pages to the visual story for ads to show. Their story has only 6 pages.

AMP docs > https://amp.dev/documentation/components/amp-story-auto-ads/?format=stories

amp-story-auto-ads extension dynamically inserts ads (implemented as amp-ad) into the story while content is being consumed by the user. 
The current algorithm expects at least a story containing 7 pages.

FB share showing error: Could you pls elaborate? I can't find any errors

quintype / quintype-amp

Visual AMp stories showing up blank on FE #326

Head script

body