CODEWITHSUNDEEP
javascriptjavavaadingoogle-ads-api
Benjamin
Benjamin

Reputation: 1173

Adding Google Adwords script into Vaadin Application

I was given a script snippet to add it at our Vaadin Application, at a specific single page to which you are redirected after completing an order:

<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>

Now, i'm dealing with the problem that i wasn't able to place that snippet directly on the page when using Vaadin.

Are there any more solutions how i could include this code du my application?

Upvotes: 0

Views: 169

Answers (1)

bekce
bekce

Reputation: 4310

Use JavaScriptComponent feature of Vaadin.

State class: You can pass variables from server side to your javascript component.

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;
}

and

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

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

You can include multiple js files in the @JavaScript annotation like: 

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

It will load those files in order.

Create mycomponent-connector.js on the same package (use resources folder if you're using maven) and fill the root of your component inside init function: 

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

};

See https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html and https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components for more information.

Upvotes: 1

Related Questions