Dynamize Text

Once created driven by our AdServer, the texts will change based on established parameters (Geolocation, weather, date/time, cookies, retargeting…).

To dynamize texts you have 4 methods at your service :

To make a text dynamic you must first create a text field. Once this text field is created, give it a name and keep this name in mind.

Adobe Edge Animate Text

To write the code for the dynamization, select the Stage of the ads, click on {} and choose the event ‘compositionReady’, and write inside this event.

If you want to select your element use this: sym.$("myText").

If your element is inside a symbol use this: sym.getSymbol("mySymbol").$("myText").

setText

The setText function allows you to insert a text in an element.

ADventori.Display.setText(element, data);

This function needs two parameters:

  • element: The target element where the text will be inserted
  • data: The data that will be sent in this element

Example

Download the example

adaptText

The adaptText function allows you to adapt the text size to its container.

ADventori.Display.adaptText(element, minFontSize);

This function needs two parameters:

  • element: The target element where the text will be inserted
  • minFontSize: The text’s minimum size

Example

Download the example

The HTML tag targeted by this function must be a block element and have the following CSS properties: width, height, font-size, line-height.

To use the adaptText method, the container which uses this method can’t use the CSS property display:none (please use opacity:0;visibility:hidden;).

setAndAdaptText

The setAndAdaptText function allows you to combine the two previous functions.

ADventori.Display.setAndAdaptText(element, data, minFontSize);

This function needs three parameters:

  • element: The target element where the text will be inserted
  • data: The data that will be sent in this element
  • minFontSize: The text’s minimum size

Example

Download the example

The element targeted by this function must be a block element and have the following CSS properties: width, height, font-size, line-height.

To use the setAndAdaptText method, the container which uses this method can’t use the CSS property display:none (please use opacity:0;visibility:hidden;).

You can also define the size of your container directly from the method setAndAdaptText:

ADventori.Display.setAndAdaptText(element, data, minFontSize, {width:XXX,height:XXX});

Download the example

verticalAlign

The verticalAlign function allows you to vertically align the text in its container.

ADventori.Display.verticalAlign(element);

This function needs one parameter:

  • element: The target element where the text is contained

Example

Download the example

The element targeted by this function must be a block element and have the following CSS properties: width, height, font-size, line-height.

To use the adaptText method, the container which uses this method can’t use the CSS property display:none (please use opacity:0;visibility:hidden;).