Tandem creative build guide

Send data between Local Connect units

Once you establish a local connection between two or more banners, you can send data between them, allowing them to send messages to each other. This is especially effective when the action of one creative depends on another creative.

For example, if you want the animation of two In-page creatives (Banners A and B) to begin after a user clicks a button in Banner A, make sure that Banner A sends a message to Banner B that lets it know the button was pressed, and make sure that Banner B listens for the message so it knows to start the animation. You can do this using local connection and the sendData function.

How do I send data between Local Connect units?

To send data between the units, you must first establish local connection (see Set up the Local Connect component). Keep in mind that there's always one parent channel, while there can be multiple child channels. You can send data from parent to child and child to parent, but never from child to another child.

For the Local Connect units to communicate, set up three things using LocalConnect API in AS2 or AS3:

  • Set up one unit to send data to connected units.
  • Set up connected units to listen for the data that's being sent to them.
  • Set up connected units that are listening for data to execute once data is received.

To send data between Local Connect units:

  1. Define the data being sent across units. To do this, set up the message you want to send.

    Continuing with the previous example, Banner A is sending the message "Start synced animation!" to Banner B, so you must define the data in Banner A. To do this, add the following API to Banner A:
    import com.google.ads.studio.localconnect.LocalConnectWrapper;
    var dataObject:Object = {message: “Start synced animation!”};
  2. Send the data to connected units.

    Continuing with the example, call one of the methods below when a user clicks a button in Banner A and you want the message to be sent, localConnectComponent is the instance name of the Local Connect component on the stage:
    1. There are two ways to send data from a parent channel to a child channel:
      1. Send the data object to all connected channels using the method:

                localConnectComponent.sendData(dataObject);*

        This is useful if you have more than one child channel you want to send the message to.
         
      2. Specify which child to send the data to by adding the child name to this method:

                    localConnectComponent.sendData(dataObject, "childName");*
         
    2. You can also specify that the data is being sent from a child panel to the parent channel by adding...

      localConnectWrapper.PARENT_NAME

      ...to the sendData method:

      localConnectComponent.sendData(dataObject, localConnectWrapper.PARENT_NAME); *

To listen for data being sent to units:

  1. Add listeners to all the files that have data being sent to them.

    In the example above, you sent a message from Banner A to Banner B. Now you must add a listener to Banner B to listen for the data being sent to it. Without this, Banner B doesn't know to listen for data from connected units.

    To do this, add this API to Banner B:

    import com.google.ads.studio.events.StudioEvent;
    localConnectComponent.addEventListener(StudioEvent.DATA_RECEIVED, dataHandler);
  2. Add a handler for the function being called in the event listener. The function dataHandler, set in the listener above, checks the data that's being sent from banner A: "Start synced animation!" If the data message matches the message sent from Banner A, it can be defined to execute your specified actions.
    var dataHandler:Function = function(event:StudioEvent):void {

         if (event.data.message == "Start synced animation!")
         {

    trace("Message was received from the parent file to sync animation!")
    //Start your synced animation here.
          }
    };