This article explains some of the common code issues to avoid, and appropriate methods of troubleshooting.
Here are some of the common issues we see...
- Make sure the Embed.js script is placed in the <head> section
The most common troubleshooting issue is improper loading of the Inform Player Suite. This can be due to various reasons, as every implementation of the Inform Player is unique to the digital property, but there are a few general implementation rules we recommend following, to ensure the best chance of successful placement.
First, the embed.js script must always make it into the html doc, in order to recognize players on the page and pass through site-specific player configuration settings. Without this script, there will be no interaction between your placement and Inform content delivery network (including Player Services). 'Plain vanilla' implementation of the script looks like this, and should be placed in the
<head>section of your html doc:
*PLEASE NOTE: Not traditional embeds, such as iFrame, Viral, or OEmbed solutions, will not require this script to be loaded in the traditional sense (written to source code), as it is pre-packaged along with the player script and all information necessary to propagate a player on the page. Please inquire with your Publisher development lead or email@example.com for more information.
- Straight Quotation Marks vs. Curly Quotation Marks (Smart Quotes)
There is a very important distinction between these two character types!
Straight quotes are generic vertical quotation marks (regular quotes) must always be used when coding, or when editing a HTML/CSS document. Quotation mark type usually depends on the application being used, so make sure to know the difference and use proper syntax. The straight single quote (') and the straight double quote (") should show up by default in coding environments, but if one were to copy these characters from Word or another word processing document, they may need to be replaced.
Curly quotes are the quotation marks used in written communications, word processing, and typography. There are four curly quote characters: the opening single quote (‘), the closing single quote (’), the opening double quote (“), and the closing double quote (”). These should NOT be used when coding, as the parser, coding environment, browser will not recognize the characters, and code will break.
This website helps explain: http://practicaltypography.com/straight-and-curly-quotes.html
- Asynchronous Loading
Special care must be taken when loading the Inform Player asynchronously ('
async' specifier within the script tag). Asynchronous loading effects the page load order and can negatively affect behavior, load times, and/or monetization of the Inform Player Suite on-page. Please see this article for asynchronous load, or be sure to use this extra script line along with the inform embed.js call:
- Make sure the container element is properly sized!
Inform players are responsive by default, meaning that without manual or explicitly-sized players, your Inform player will size to the full width of its container element, whatever that happens to be (
<div>element most commonly). Inform players are also 16:9 aspect-ratio by default, meaning that wide-screen aspect is what you will see unless otherwise specified (4:3 is another option). If partners do not set a fixed size--meaning that if partners do not set the
data-heightattributes--then the player will assume the size of its immediately surrounding container.
If your player is improperly sized, please check the container(s) around it to see if these have the correct style settings that you want. This includes margin and padding attributes as well.
- Loading 3rd party libraries: where's my player <div>?
We realize that loading order/precedence, load speeds (weight), look and feel, and player start behaviors are all very important to digital property managers and editorial personnel working within our content management system. Loading and placement of Inform scripts on-page is ultimately up to our partners and the development professionals pushing changes to production, and these implementations often involve the loading of scripts through 3rd party libraries or .js files obfuscated from Inform Support's view.
There is nothing wrong with doing this! If security or architecture concerns mandate loading via external means this is perfectly acceptable to Inform, but please ensure that the embed.js script and player <div> elements are making it to the html document and staying there through page load and player propagation. Also realize that we will be unable to fully support or comment on obfuscated code.
If you do not see a configurable
<div>element on page, use the Sandbox to ensure that it works in general. Perhaps then step backwards from a 'plain vanilla' implementation in a testing environment, incrementally, to something more site-unique in production.
- Player with a height of 0px.
To fix this, simply make explicit the
data-aspect-ratioconfigurable settings, which will size the player in a fixed manner.
- More to come. Please submit feedback to firstname.lastname@example.org