Flowcards AMP Transformations

Experiences Formats
,
1

AMP Transformations let you repurpose existing AMP pages for Flowcards without code changes. Most publishers already have AMP pages — with minor tweaks they become effective Flowcard content, no upfront technical investment required.

Transformations visual representation
Transformations visual representation1920×1200 150 KB

Why transformations exist

AMP pages are designed for standalone reading. When loaded inside a Flowcard, common problems appear:

  • Oversized headers: Navigation bars and branding headers consume vertical space. On a Flowcard’s initial snap point, the user sees chrome instead of content.
  • Broken dynamic components: Elements like amp-list that rely on JS and external requests don’t render until the Flowcard reaches its interactive state, leaving blank areas.
  • Top media blocking the title: A large image pushes the article title below the visible area of the initial snap point.

Content transformations solve these problems by modifying the AMP document in real time before it renders inside the Flowcard.

Create a transformation

Transformations are created in Experiences Settings > Transformations as reusable templates. Once created, a transformation can be applied to any Flowcard. This is typically a one-time setup during onboarding.

  1. Navigate to Experiences Settings > Transformations.
  2. Click + New Transformation and give it a name.
  3. Enter a Test URL — the AMP page you want to transform. The live preview on the right shows the result.
  4. Click Add operation to add transformation operations. Each operation targets specific elements in the AMP document.
  5. Stack multiple operations to build the complete transformation.
  6. Click Save.

The transformation is now available from any Flowcard’s configuration.

Transformations visual representation
Transformations visual representation1920×1200 76.3 KB

Available operations

Operations modify the AMP document’s HTML, CSS, JSON, and attributes. Click Add operation and search or select from the list:

HTML operations

Operation What it does
Append HTML element Injects new HTML inside a parent element. Parameters: parent selector, conditional HTML selector, HTML content
Remove HTML element Removes elements matching a CSS selector from the document
Reparent HTML element Moves an element from its current position to a new parent in the DOM
Set HTML attribute Sets an attribute on a target element. Parameters: target CSS selector, attribute name, value
Replace HTML attribute JSON Replaces a JSON value inside an HTML attribute

CSS operations

Operation What it does
Append class Adds a CSS class to elements matching a selector. Parameters: target CSS selector, class name, limit (max elements to affect)
Remove class Removes a CSS class from elements matching a selector
Append styles Injects additional CSS rules into the document

JSON operations

Operation What it does
Merge JSON Merges JSON data into an existing JSON structure
Replace JSON Replaces a JSON structure entirely
Replace JSON attribute Replaces a specific attribute within a JSON structure
Remove JSON attribute Removes an attribute from a JSON structure
Enhance JSON attribute Modifies a JSON attribute value with additional data

Utility operations

Operation What it does
Preload image Adds preload hints for images to improve loading performance
Resource URLs absolute Converts relative resource URLs to absolute paths
Move root vars to body Moves CSS custom properties from the root to the body element
GoogleAnalytics Recommender Adds Google Analytics tracking configured for Recommender experiences
GoogleAnalytics Experiment Adds Google Analytics tracking configured for A/B testing experiments

Common transformation patterns

Remove navigation headers

Most AMP pages have prominent header bars that waste vertical space inside a Flowcard. Remove them to show content immediately at the initial snap point.

  1. Add a Remove HTML element operation.
  2. Set the target CSS selector to match your header (e.g., header, .nav-bar, .site-header).
  3. Repeat for any secondary navigation bars.

Remove top media

Large images push the article title out of view. Remove the top media from the AMP document and configure the Flowcard’s hero image instead — this gives you the parallax effect while keeping the title visible at the initial snap point.

  1. Add a Remove HTML element operation targeting the hero image container.
  2. In the Flowcard’s Content tab, set the hero image to Auto-detect to pull the same image from the page’s structured data.

Add analytics tracking

Add specific tracking for proper attribution of Flowcard-driven pageviews.

  1. Add a GoogleAnalytics Recommender operation for content recommendation tracking.
  2. Or add a GoogleAnalytics Experiment operation if the Flowcard is part of an A/B test.

Fix visual glitches

Minor CSS issues like broken paddings, margins, or layout shifts:

  1. Add an Append styles operation with corrective CSS rules.
  2. Or use Append class to apply existing utility classes to specific elements.

Testing transformations

Every transformation has a live preview. Enter a test URL and the preview renders the transformed AMP document in a mobile device frame. Changes appear immediately as you add or modify operations.

Click Open in browser below the preview to see the full transformed page.

Test with multiple URLs from your site. A transformation that works for one article may break on another if the DOM structure varies across templates.

Going deeper