Follow
  • MDX: Manage > Ads > New > Design New HTML5 Ad
  • Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads 

Password: SizmekTraining

Overview

Events occur when a user engages with the ad. It can occur following automatic ad upload or upon user interaction with the ad, for example: a mouse in, tap or click. When an event runs, you can assign actions to follow thereby increasing consumer engagement with the ad. These actions can include expanding panels, routing click-throughs to predefined pages, and adding a set of cool animations. The dynamic timeline in Ad Builder enables you to view, move, and organize the actions and animations to gain the Sizmek effect.  

The Actions and Animations pane is accessible from the taskbar. You can easily hide, detach, move, and drag the pane to any location on the canvas. 

 

Note: The default action duration scale is set to five seconds. You can change the scale by clicking '+' on the scale located at the bottom of the 'Actions and Animations' pane.

Assigning Events

The following table describes the supported events.

Event Description
On Load

This is a touch gesture.

Tap/Click

Opens, selects, or activates whatever you tap. Same as clicking with a mouse.

Double Click An event is triggered when the user performs a mouse double-click on the component.
Mouse In An event is triggered when the user moves the mouse towards the component.
Mouse Out An event is triggered when the moves the mouse away from the component.
Mouse Down An event is triggered when the user depresses the mouse button on this  component.
Mouse Up An event is triggered when the user releases the mouse button from this component.
Custom Sequence You can copy a sequence of actions and animations from one component to another by setting the target object as Self. For more information, see Custom Sequence.

Mobile-Related Events

Shake

An event is triggered when the user shakes the mobile phone.

Swipe Up

This is a touch navigation gesture that applies to mobile phones and IPADs.

Swipe Right

This is a touch navigation gesture that applies to mobile phones and IPADs.

Swipe Down

This is a touch navigation gesture that applies to mobile phones and IPADs.

Swipe Left

This is a touch Navigation gesture that applies to mobile phones and IPADs.

Video-Related Events

On Video Play An event is triggered while a video is running. An event that is triggered only once when the video is first played (either manually by the user, by another event, or via autoplay).
On Video End An event is triggered when the component has ended running.
On Video Pause An event is triggered if the user pauses the component.
On Error An event is triggered if the video fails to play due to an error.
Expandable Ads
On Visible

Applicable to Banners and Panels.

This event is triggered when 50% of the banner or the panel area becomes visible to the user, for 0 milliseconds (instantly), in case the banner was less visible previously. For more information, see Triggering Events based on Panel and Banner Visibility.

On Not Visible

Applicable to Banners and Panels.

This event fires when 50% of the banner's area becomes invisible to the user, for 0 milliseconds (instantly), in the case the banner was more visible previously. For more information, see Triggering Events based on Panel and Banner Visibility.

In-Stream Ads
On Skip Enabled When the Allow Skip After X Seconds field is selected, the Skip Enabled event fires after x seconds after the ad starts. The timing of this start is when the video starts playing and not when the ad is loaded. This event acts like any other trigger in Ad Builder, (for example, Click, Mouse In, Video Play, and more), and is found in the Master Banner’s event list.
On Close Enabled This event enables you to provide ways for the user to close the ad manually. If the Disable Auto Close action was used anywhere in the ad, then instead of closing the ad when it is completed the On Close Enabled event will trigger. For more information, see HOW TO: Work with HTML5 In-Stream Interactive Ads in Ad Builder.

Note: You cannot assign events or actions to the HTML, Pinterest, and Twitter Feed components.

Triggering Actions and Animations from Events

Procedure
  1. Select a component from the Components list.
    The component's properties are displayed in the right pane. This could be a textbox, an image or other components. If you would like to define actions that take place upon ad load, select the banner itself.
  2. Click the Actions and Animations drop-down arrow to expand this section. 
  3. Click Create New Event and select an event from the drop-down list. These events apply to ads running on PCs and mobiles although the terminology may differ such as Tap your mobile ad as apposed to clicking an ad on your PC. 
  1. Click Add Action.
    The New Action timeline slot opens, highlighted in blue, and the Action:Select drop-down list is displayed below.
  2. Select the action type from the arrow drop-down list.
    As displayed in the following example, when the user clicks the 'text1' ad component, the 'Goto URL' action routes the user to the defined URL.
    By default, the first action is set to On Trigger.
  3. [Optional] When adding multiple actions, you can decide whether to run an action after a previously defined action or parallel to it. This feature allows you to accurately and easily schedule multiple actions on the timeline. 
  4. In addition you can drag and stretch/shrink the duration of the actions within the timeline.
    The following example displays two actions associated with the "Tap\Click" event.
  5. Click Play to simulate the actions in the timeline.  

Assign Multiple Actions to an Event

You can assign multiple actions to an event. Multiple actions added to a single event run one after another. When one action finishes, the following action starts. This is default behavior, however you can change the actions to run in parallel with the previous action.

Assign a JavaScript to an Action

  1. From the Actions drop-down list, select Custom Actions > Run JavaScript.
  2. Scroll down and click Open Code Editor.
    An internal code editor opens.
  3. Define your JavaScript object and click Apply.
  4. Verify that your code is running correctly on the ad.

Assign Mobile Actions to Events

Ad Builder allows you to easily add dedicated mobile actions to your ads.

  1. From the Actions drop-down list, select Mobile Actions > Call Number\SMS Number\Email.

  2. Proceed to configure the following mobile-related actions:

Action  Description Comments
Call Number Triggers a  'call' action to a phone number. When a "Call Number" action occurs, it launches the phone's default dialer and enters the number to be called. It does not call the number automatically. It is configured using the international phone number format.
SMS Number Triggers a 'send SMS' action to a mobile number. When a "Send SMS" action occurs, it launches the phone's default SMS client, enters the recipient's number and the body text. It does not send the message automatically. The user has to click "send".
Email Triggers a 'send email 'action When a "Send email" action occurs, it launches the phone's default email client, enters the recipient's and cc'd email addresses, email subject and the body text. It does not send the message automatically. The user has to click "send"

Assign an Animation Action to an Event

  1. From the Action drop-down list, select Animation> Play; Stop; Pause; Replay; Mute; Unmute.
  2. From the Target: Select drop-down list, select an animation to run.
  3. Configure the following fields:

Field 

Description 
Start x
End x 
Indicates the position where the component should start before activation.
Allows you to drag the animation to the target destination on the ad.
Duration Indicates the duration of the animation in milliseconds.
Loop

Indicates the number of times to run the animation.

  • Repeat Times: Runs the animation the number of time indicated by the user.
  • Repeat Forever: Runs the animation in a loop.
Ease

Easing indicates the nature of the motion applied to your animation and makes your animations feel more natural.

  • None: No motion is applied.
  • Ease In: Applies motion to the animation that starts slowly and accelerates.
  • Ease Out: Applies motion to the animation that starts quickly and decelerates.
  • Ease in and Out: Applies a combination of the Ease In and Ease Out.
Ease Power

Ease Power is enabled when the an Ease type is selected in the Ease field. It indicates the intensity of the motion. The higher the Ease Power value, the greater the acceleration and deceleration of the Ease motion.
The following values are supported:

  • 1,2,3,4
Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments