Wie Google Textanzeigen mit OpenX

18. September 2008

Ich habe eine Menge Leute fragen mich, ob seine mögliche OpenX verwenden, um Google Text wie Anzeigen zu schalten. Meine Antwort ist in der Regel sollte es leichter als Sie denken. Erstellen Sie einfach ein paar Textanzeigen und fügen Sie ein wenig Stil.

Ich habe keine in der Praxis noch nicht gesehen und so nahm ich einen Moment Zeit, um ein Beispiel für diejenigen, die gerne ähnlich wie Google-Anzeigen zeigen würde.

Erstellung von Anzeigen und Verlag Zone

Zunächst müssen Sie entscheiden, was Textanzeigen Sie möchte zeigen, und wo. Sie haben wahrscheinlich bereits, dass ein oder wären Sie nicht hier sein. Für dieses Beispiel habe ich vier 150 X 150 Textanzeigen in OpenX, um eine 160x600 Skyscraper bilden.

Du kannst jetzt gehen durch und schaffen mehr je nach Ihren Bedürfnissen oder verwenden Sie einfach den handlichen Copy-Funktion innerhalb von OpenX wie ich.

Du bist jetzt ein paar Anzeigen erstellt auf Ihre Bedürfnisse zugeschnitten haben, müssen Sie einen Verleger und oder Zone zu schaffen, um ihnen zu zeigen. Dann verknüpfen Sie die Text-Anzeigen, die Sie an die Verlage Zone geschaffen haben.

Erstellen der CSS und HTML

Jetzt heres der Teil, wo Sie ein wenig ad-Stil, um sie zusammenzubringen, um eine Anzeige-Einheit zu bilden. Wenn Sie einen Editor dont haben finden Sie eine Reihe von Online-CSS-Box-Macher. Versuchen Sie eine Google-Suche nach " CSS-Box-Schöpfer "Oder noch einfacher machen und ein paar schnelle coppy Vergangenheit von meinem unten. Bitte speichern Sie die Bilder auf Ihrem eigenen Server, wenn Sie den Code verwenden und das Hintergrundbild ändern URLs zu wählen.

  . Oxad160 {
	 160px ; width: 160px;
	 600 ; Höhe: 600;
	 #f90 ; background-color: # f90;
	 #fff ; color: # fff;
	 }
 . Oxad160 p {
    1px ; margin-top: 1px;
    1px ; margin-bottom: 1px;
    0 5px ; margin: 0 5px;
    10px ; padding: 10px;
    small ; font-size: small;
 }
 : none ; a {text-decoration: none;
     #463E3F ; color: # 463E3F;
      }
 . Oxtop {
	 url ( http://www.btdsoft.com/examples/images/tr.gif ) no-repeat top right ; background: url (http://www.btdsoft.com/examples/images/tr.gif) no-repeat oben rechts;
    }
 . Oxbottom {
	 url ( http://www.btdsoft.com/examples/images/br.gif ) no-repeat top right ; background: url (http://www.btdsoft.com/examples/images/br.gif) no-repeat oben rechts;
   }
 img. Ecke {
    15px ; width: 15px;
    15px ; height: 15px;
    none ; border: none;
    block !important ; Display: Block wichtig;
   }
 . Adcontent {
    0 5px ; margin: 0 5px;
    10px ; padding: 10px;
    150px ; height: 150px;
    small ; font-size: small;
     }

Nun müssen Sie ein wenig HTML, um die Anzeigen auf Ihrer Web-Seite zu zeigen. Unten ist das, was ich für dieses Beispiel erstellt.

 <div class="oxad160"> <div class="oxtop"> <img src = "http://www.btdsoft.com/examples/images/tl.gif" alt = "" width = "15" height = "15" class = "Ecke" style = "display: none" /> </ div> <div class="adcontent"> *** Einfügen Anzeigencode hier *** </ div> <div class = "adcontent" > *** Einfügen Anzeigencode hier *** </ div> <div class="adcontent"> *** Einfügen Anzeigencode hier *** </ div> <div class="adcontent"> *** Einfügen ad Hier Code *** </ div> <p Anzeigen von <a href="http://www.oxrev.com"> OxRev.com </ a> </ p> <div class="oxbottom"> < img src = "http://www.btdsoft.com/examples/images/bl.gif" alt = "" width = "15" height = "15" class = "Ecke" style = "display: none" /> </ div> </ div>

Dass sie alle zusammen

Wir haben jetzt eine Gruppe von Textanzeigen, ein Verleger und Zone, Bits von CSS und HTML. Sagen wir es zusammen und sehen, ob es funktioniert. Für dieses Beispiel habe ich die CSS als 160.css, und die HTML-Box als Vorlage gespeichert, dass ich irgendwo in mir zu einem späteren Zeitpunkt wählen, zu stopfen. Ich habe die CSS-Datei und die Ecke von Bildern auf einen Server hochgeladen. Ich lege nun einmal die HTML-Box auf einer Seite muss ich die CSS-Datei mit, um es zu importieren für die Bilder und die Formatierung korrekt apear wird. Hierfür habe ich einen Import-Befehl verwendet.

  <style>
 @ Import url ("http://www.btdsoft.com/examples/160.css");
 </ Style>

Setzen Sie dieses Stück Code direkt vor dem ersten div-Tag der Box, daran zu denken, die URL zu Ihrem Server-Standort zu ändern.

Nun müssen Sie den Bannercode von OpenX bekommen. Hier habe ich Java gewählt, stellen Sie sich sicher "nicht mehr anzeigen ein Banner aus der gleichen Kampagne wieder auf der gleichen Seite". Dies wird von der Wiederholung der OpenX-Anzeigen halten.

Legen Sie einfach Ihr Code von OpenX überall, wo ich "*** Einfügen Anzeigencode hier ***" oben in der HTML-Beispiel zu haben. Sie brauchen nur den einen Code wiederholt, wie OpenX die gleiche Anzeige zu wiederholen pflegen. Laden Sie Ihr Test auf einen Server oder eine Vorschau in Ihrem Editor und Sie sollten so etwas wie das Beispiel sehen Sie hier .

Verschiedene Layouts

Wenn Sie nicht wollen, mit CSS zu täuschen, ist es einfach zu erstellen, die gleiche Sache in jedem Format. Verwenden Sie einfach die oben genannten Erstellung von Anzeigen, Zonen und der Aufruf Code Methoden. Sie können ein paar Zeilen wie Google oder einen einfachen Textlink eine Zeile. Denken Sie daran, OpenX sagen, nicht um die gleiche Anzeige aus der gleichen Kampagne zeigen auf der gleichen Seite.
Damit dies korrekt funktioniert ein Werbetreibender darf keinen alle Anzeigen in einer Kampagne. Halten Sie ihre Textanzeigen in einer Kampagne und Banner-Anzeigen in einem anderen. Wenn OpenX sehen ist gibt es eine weitere Anzeige aus der gleichen Kampagne auf der Seite. es wird seine Arbeit tun und nicht zeigen, andere, wie angewiesen.