AMP supports two-way data binding, which is generally used to expose certain page-level information (customer-specifics) within the player and for further usage. Also, the player leverages media and ad playback information for customer manipulation.

This tutorial illustrates the implementation of data bindings along with AMP.

• Parameterization / Substitutions
• Contextual Data Provided to Bindings
• Customer specifics to Bindings

Parameterization / Substitutions

Player allows configuration variables substitutions with either player contextual data or customer-specifics.
This requires the #{ } syntax in order to let the player know that this should be evaluated. Any config variable with #{ } that does not meet player.variable, media,variable, or ads.variable, DOM lookup will occur.

Contextual Data Provided to Bindings

Substitutions in many configuration elements (usually for ads and analytics) use the syntax #{variable}.

• player object Provides some current player information.

 #{player.version} // results in "9.1.2+premier"

See available contextual data members of player object here

• media object Provides current media information.

 #{media.title} // "sample video title"

See available contextual data members of media object here

• ads object Provides current break and ads information for the current break.

 #{ads.currentAd.title} // "Ad creative title"

See available contextual data for currentAd object here

Customer specifics to Bindings

Customers are able to convey detailed information that the player is not allowed to access by default or it's not available prior player creation. This can be done by using parameterization on a wide-open JS or DOM execution level. Customers can refer to DOM variables, expressions, or methods

• DOM variables

 
 window.foo = 'bar'

var config = {
  plugins: {
      mediaanalytics: {
        ...
        dimensions: {
            title: "#{foo}", // Evaluation results is "bar"
            playerId: "Sample Player Id"
        }
    }
  }
}

• JS method calls

 
 window.foo = function() { return 'bar'; }

var config = {
  plugins: {
      mediaanalytics: {
        ...
        dimensions: {
            title: "#{window.foo()}", // Evaluation results is "bar"
            playerId: "Sample Player Id"
        }
    }
  }
}

• Expressions

 
 window.foo = function() { return 'bar'; }

var config = {
  plugins: {
      mediaanalytics: {
        ...
        dimensions: {
            title: "#{foo() === 'bar' ? 'foobar' : 'other'}", // Ternary expressions are also allowed 
            playerId: "Sample Player Id"
        }
    }
  }
}