Hinzufügen von Google Adwords Skript in Vaadin Anwendung

Question

ich einen Skript-Schnipsel gegeben wurde es bei unserer Vaadin Anwendung hinzuzufügen, zu einer bestimmten einzelnen Seite, die Sie nach dem Abschluss einen Auftrag weitergeleitet werden:

<script type="text/javascript"> 
    var google_conversion_id = XYZ; 
    var google_conversion_language = "en"; 
    var google_conversion_format = "3"; 
    var google_conversion_color = "ffffff"; 
    var google_conversion_label = "XXXYYYZZZ"; 
    var google_conversion_value = 1.00; 
    var google_conversion_currency = "EUR"; 
    var google_remarketing_only = false; 
</script> 

<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> 
</script> 

<noscript> 
    <div style="display:inline;"> 
    <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/XYZ/?value=1.00&amp;currency_code=EUR&amp;label=XXXYYYZZZ&amp;guid=ON&amp;script=0"/> 
    </div> 
</noscript> 

Jetzt, i‘ Ich habe mich mit dem Problem beschäftigt, dass ich das Snippet nicht direkt auf der Seite platzieren konnte, wenn ich Vaadin benutzte.

• Ich versuchte Vaadin der Label zusammen mit ContentMode.HTML diesen Codeblock hinzufügen, aber es ist einfach nicht mein zu Layout oder Component hinzugefügt.
• CustomLayout und eine spezielle HTML-Seite mit diesem Code als Vorlage verwendet, filtert die <script> Abschnitte heraus.

Gibt es noch weitere Lösungen, wie ich diesen Code für meine Anwendung verwenden könnte?

Answer 1

Verwenden Sie Feature von Vaadin.

State-Klasse: Sie können Variablen von der Serverseite an Ihre Javascript-Komponente übergeben.

public class MyComponentState extends JavaScriptComponentState { 
    public String google_conversion_id = "XYZ"; 
    public String google_conversion_language = "en"; 
    public String google_conversion_format = "3"; 
    public String google_conversion_color = "ffffff"; 
    public String google_conversion_label = "XXXYYYZZZ"; 
    public double google_conversion_value = 1.00; 
    public String google_conversion_currency = "EUR"; 
    public boolean google_remarketing_only = false; 
} 

und

@JavaScript({"mycomponent-connector.js"}) 
public class MyComponent extends AbstractJavaScriptComponent { 

    @Override 
    protected MyComponentState getState() { 
     return (MyComponentState) super.getState(); 
    } 
} 

Sie können mehrere js Dateien in der @JavaScript Anmerkung enthalten wie:

@JavaScript({"https://www.googleadservices.com/pagead/conversion.js", "mycomponent-connector.js"}) 

Es diese Dateien, um geladen werden.

erstellen mycomponent-connector.js auf demselben Paket (Verwendung Ressourcen-Ordner, wenn Sie Maven verwenden) und die Wurzel Ihrer Komponente innerhalb init-Funktion füllen:

window.com_mypackage_MyComponent = 
function() { 
    // this is your html component to fill 
    var myelement = this.getElement(); 
    // get state variables 
    var myvar = this.getState().google_conversion_label; 
    // call some library method to fill it 

}; 

Siehe https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html und https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components für weitere Informationen.