Search code examples
javascripthtmlweb-componentgoogle-web-designer

Google Web Designer Custom HTML5 Components


How can I make custom Google Web Designer Components?

I was assuming they'd be like Adobe Flash Components. It's in Beta and I can't find much info on it all.

I've tried searching in all of the directories under /Applications/Google Web Designer.app/Contents to see if I could spy some samples. And the docs are geared towards users: https://support.google.com/webdesigner/

I want to build HTML5 ad Components the team can use.


Solution

    1. You should create your own custom tags based on W3C standard
    2. Create json manifest for your component:

      { name: {string} A human readable name description: {string} A succinct but complete description of the component type: {string} The element type, which must contain a dash (-) version: {number} The version number, which must be incremented with each update files: {Array.<FilesObject>} The JS and CSS files for the component externalScripts: {Array.<string>} The external script dependencies dependencies: {Array.<string>} The dependent types attributes: {Array.<Attribute>} The attributes of the component methods: {Array.<Method>} The methods of the component events: {Array.<Event>} The events dispatched by the component metrics: {Array.<MetricEvent>} Events that must be tracked as a metric }

    3. Create all the required .js and .css then package the components.

    In the following link you can find a tutorial on how to create custom components for GWD.

    https://support.google.com/webdesigner/topic/6175711?hl=en&ref_topic=6175722&vid=1-635799099790786490-3463806884

    Hope it helps.