Building Expanding Creatives Google Web Designer English German

Building Expanding CreativesYouTube↗ IA↗(long shot)
Science & Technology 28.8K views 68 likes 2 dislikes 04 Aug 2014

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

OWEN CORSO: Hello and welcome to this Google Web Designer

OWEN CORSO: Willkommen zu diesem Anleitungsvideo

video tutorial.

für Google Web Designer.

I'm Owen Corso from Google.

Ich bin Owen Corso von Google,

And today, we're going to build a rich media

und heute werden wir ein Rich Media-Expandable-Creative

expandable creative with video.

mit einem Video erstellen.

Let's start by selecting File, New File.

Dafür wählen wir zunächst "Datei" und "Neue Datei" aus.

This opens a dialog box where we will set up our ad.

Es erscheint ein Dialogfeld, in dem wir unsere Anzeige erstellen können.

First, let's choose our environment.

Als Erstes legen wir die Umgebung für die Anzeige fest.

We have three options-- DoubleClick, AdWords,

Wir haben drei Optionen: "DoubleClick", "AdWords",

und "Allgemein".

The default is DoubleClick, so we will leave that as is.

Wir übernehmen die Standardeinstellung "DoubleClick".

Next, we can select the type of ad.

Als Nächstes können wir den Anzeigentyp auswählen.

We want to make an expandable, so we

Wir möchten eine erweiterbare Anzeige erstellen,

select Expendable on the left.

daher wählen wir auf der linken Seite "Expandable" aus.

Next, we can set up our ad's dimensions.

Im nächsten Schritt können wir die Anzeigengröße festlegen.

We are building a 320 by 50 that expands to 480 by 250.

Wir erstellen ein Creative im Format 320 x 50, das sich auf 480 x 250 erweitert.

So I will make those changes.

Ich nehme also diese Änderungen vor.

We then assign the creative a name.

Danach vergeben wir einen Namen für das Creative.

I will leave my Save To Location as the default,

Ich behalte den standardmäßigen Speicherpfad

and leave the animation mode set to Quick.

und auch den standardmäßigen Animationsmodus.

Once I'm happy with my settings, I click OK.

Sobald wir mit den Einstellungen zufrieden sind, können wir auf "OK" klicken.

Google Web Designer creates the initial pages of the ad for me

Google Web Designer erstellt nun die ersten Seiten der Anzeige

with the dimensions I defined.

mit den Abmessungen, die ich festgelegt habe.

The collapsed page already contains a Tap Area event

Auf der minimierten Seite gibt es bereits ein Berührungsbereich-Ereignis

to expand the ad and an expanded page with a close tap area

zur Maximierung der Anzeige; und die maximierte Seite hat dementsprechend

to collapse back down.

auch einen Berührungsbereich, um sie wieder zu minimieren.

It also has added all the initial code needed for the ad

Außerdem beinhaltet die Anzeige alle erforderlichen Code-Inhalte,

to talk to the ad server and collect tracking metrics.

um mit dem Ad-Server zu kommunizieren und Messwerte zu erfassen.

Those metrics are built into the components,

Diese Messwerte sind in die Komponenten integriert,

and we can assign unique identifiers to each component

und während der Erstellung können wir jeder Komponente

eindeutige IDs zuordnen.

So now I can start adding the graphic elements I've already

Nun kann ich die grafischen Elemente hinzufügen,

die ich bereits vorbereitet habe.

I drag a background image or initial ad state

Ich ziehe also ein Hintergrundbild oder den anfänglichen Anzeigenstatus

and drop it onto the stage, then align it to the stage,

in den Anzeigebereich, nehme die Ausrichtung vor

and layer it behind the tap area by sending to back.

und klicke anschließend auf "In den Hintergrund setzen", um das Element hinter den Berührungsbereich zu verschieben.

Now, let's switch to our expanded page.

Wechseln wir nun zur maximierten Seite

Let's add a background image by dragging my image file

und fügen wir ein Hintergrundbild hinzu, indem wir die gewünschte Bilddatei

in den Anzeigebereich ziehen.

I can also add a button to the stage

Wir können auch eine Schaltfläche hinzufügen,

by dragging the Tap Area component.

indem wir die Komponente "Berührungsbereich" ebenfalls dorthin ziehen.

Let's make a background exit tap area.

Als Nächstes erstellen wir einen Exit-Berührungsbereich im Hintergrund.

I will size, align it, and then I will give it a unique name.

Zuerst lege ich die Größe und Ausrichtung fest; danach vergebe ich einen eindeutigen Namen.

To add functionality to the button,

Um dieser Schaltfläche eine Funktion zuzuweisen,

I will add an event using the plus button in the event's

füge ich ein Ereignis hinzu, indem ich auf die Plus-Schaltfläche

in der Symbolleiste klicke.

This brings me to my Actions panel,

Dadurch wird das Steuerfeld "Aktionen" aufgerufen,

where we assign all of the metrics

mit dem wir alle Messwerte für die Anzeige per Mausklick zuweisen,

to our ad instead of coding them manually.

statt sie manuell programmieren zu müssen.

I'm going to select the tap area I just

Ich wähle jetzt den Berührungsbereich,

named Background Exit from the list.

den ich "backgroundExit" genannt habe, aus der Liste aus.

Choose Tap Area, Touch Click as the event.

Wir klicken auf "Berührungsbereich" und legen "Berühren/Klicken" als Ereignis fest.

Double-click Component (changed to: Google Ad), Exit.

Dann klicken wir auf "Google Ad" und "Exit".

On the Receiver panel, I select GWD ad.

Im Steuerfeld "Empfänger" wähle ich die Option "gwd-ad" aus.

Lastly, I give it an exit identifier and a destination

Schließlich lege ich eine Exit-ID

und eine Ziel-URL fest.

For more in-depth details on the event model,

Weiterführende Informationen zu Ereignismodellen

check out the Events and Metrics video.

finden Sie im Video zu Ereignissen und Messwerten.

Next, let's add a video component.

Als Nächstes fügen wir eine Videokomponente hinzu.

You drag it to the stage, then give it a name

Wir ziehen die Komponente in den Anzeigebereich, benennen sie

and size it properly.

und richten die Größe ein.

Tell it how to behave.

Dann legen wir fest, wie sich das Video verhalten soll.

I want it to auto play and start muted.

Ich möchte, dass es automatisch startet und stumm geschaltet ist.

And you target the video file here.

Hier legen wir das Ziel für die Videodatei fest.

This component has all of the metrics built in,

Sämtliche Messwerte sind bereits in die Komponente integriert,

so you can avoid hand coding them in the ad.

sodass wir sie nicht manuell codieren müssen.

Let's preview our ad.

Sehen wir uns die Anzeige in der Vorschau an.

On page load, we see our collapsed state.

Zunächst erscheint die Anzeige im minimierten Zustand.

When we click, the ad expands to our expanded page.

Wenn wir sie jetzt anklicken, wird die maximierte Seite aufgerufen.

Our video behaves as we told it to,

Unser Video verhält sich genau so, wie wir festgelegt haben.

and clicking on the background exits to our landing page.

Mit einem Klick auf den Hintergrund gelangen wir auf unsere Zielseite.

Once the ad is built and functioning as you want,

Sobald die Anzeige erstellt ist und wunschgemäß funktioniert,

it is ready to publish.

kann sie veröffentlicht werden.

Go to File, Publish.

Dazu klicken wir auf "Datei" und "Veröffentlichen".

And you're presented with a few options--

Wir haben die Wahl zwischen mehreren Optionen:

Publish Locally, to Google Drive,

"Lokal veröffentlichen", "Auf Google Drive veröffentlichen"

and, finally, to DoubleClick Studio.

und "In DoubleClick Studio veröffentlichen".

Let's choose Publish Locally.

Wählen wir die Option "Lokal veröffentlichen".

This is where you can control how the ad is output.

Jetzt können wir festlegen, wie die Anzeige ausgegeben wird:

For instance, you can add polite load

Wir können zum Beispiel "Polite Load" zur Anzeige hinzufügen,

to the ad, which delays the ad load until after the page

damit sie erst im Anschluss an die übrigen Seiteninhalte

You can also set it to minify the code

Ebenso können wir den Code reduzieren

and add browser prefixes automatically.

und Browserpräfixe automatisch hinzufügen lassen.

We'll leave all these settings as to the default.

Für unser Beispiel behalten wir erst einmal die Standardeinstellungen bei.

Click Publish, and Web Designer will wrap up all of your files

Wir klicken auf "Veröffentlichen", und Web Designer verpackt daraufhin

in a nice little zip for uploading to Studio.

alle Dateien in eine kleine ZIP-Datei für den Upload in Studio.

Now, let's test it out in Studio.

Jetzt folgt ein kleiner Testlauf in Studio.

Let's make a new creative of in-app type.

Erstellen wir ein neues Creative vom Typ "In-App".

In-app creatives are automatically

In-App-Creatives sind durch Studio

MRAID compliant through Studio.

automatisch MRAID-konform.

Drag the zip file to upload our creative to Studio.

Ziehen wir nun die ZIP-Datei in das Studio-Fenster, um die Anzeige hochzuladen.

Now, let's preview our creative.

Zunächst können wir unser Creative in der Vorschau überprüfen.

As you can see, I can expand the unit, play the video,

Wie man sieht, kann ich die Anzeige erweitern, das Video abspielen

and trigger the background exit we added.

und den Hintergrund-Exit auslösen, den wir hinzugefügt haben.

You can see these events logging to the output

Dabei werden alle diese Ereignisse von der Ausgabekonsole

console on the left.

auf der linken Seite erfasst.

And that's an overview of Studio integration

Dies war ein kleiner Überblick über die Integration von Studio-Funktionen

features in Google Web Designer.

in Google Web Designer.

Similar videos:

Building Expanding Creatives - Google Web Designer
Google Web Designer
8.7K views 56 likes 2 dislikes 18 Sep 201897% match

Component Tracking in DoubleClick Studio
Google Web Designer
5.6K views 13 likes 1 dislikes 04 Aug 201431% match

DoubleClick Studio Events
Google Web Designer
12.3K views 24 likes 5 dislikes 04 Aug 201430% match

Publish to Studio
Google Web Designer
7.7K views 17 likes 1 dislikes 04 Aug 201430% match

Teil 10: Mit Forms in Microsoft Teams arbeiten
microsoftbildung
3.6K views 9 likes 0 dislikes 29 Jun 202027% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201927% match

PI System Basics - Building Blocks in Action
AVEVA PI System Learning
839 views 3 likes 1 dislikes 07 May 202026% match

Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201526% match

Google Earth Studio - Basics
Google Earth
169K views 1.1K likes 21 dislikes 08 Mar 201926% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201526% match

Google Web Designer for AdWords (Demo)
Google Ads
17K views 83 likes 3 dislikes 21 Sep 201526% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201525% match

Studio Dynamic Profiles
Google Web Designer
5.6K views 35 likes 1 dislikes 28 Sep 201825% match

Autodesk Inventor 2019 | Diseño Inteligente | Video 06
Autodesk Inventor in Spanish
3.1K views 163 likes 0 dislikes 11 May 201925% match

HOW TO CREATE A PROFESSIONAL ANIMATION IN 5 MINUTES FREE (WITHOUT WATERMARK) // GOOD QUALITY
DESCARGAS SIN ANUNCIOS
3.8K views 242 likes 3 dislikes 21 Apr 202025% match

Settings Privacy About Contact Donate