Upgrade Simple AdSense using Drupal Console

In this article, I'll show you how to upgrade Simple AdSense Module to 8.x with the help of Drupal Console

TL;DR?

Too long; didn't read? The short version:

  • Generate code using Drupal Console with one command drupal chain contains three commands or execute those three commands step by step, then got a setting form for Publisher ID and a type of block named Simple AdSense Block with an extra input field for setting each AD Unit ID .
  • Using the newly added configuration system, put Publisher ID into a .yml file.
  • Implements a custom theme for render javascript code of Google AdSense AD Unit.

Content

  • Background
  • Generate Code using Drupal Console
  • Clone the repository
  • Utilize Configuration System
  • Implements a custom theme
  • Demo/Screenshots

Background

Simple AdSense Module helps site builders putting a Simple AdSense Block into any regions on a page. The block contains a piece of javascript code showing a responsive AD Unit generated by Google AdSense

There is a Google AdSense module providing the similar feature with a lot of options. In general, we don't need a particular size of AD Unit, responsive AD Unit is enough.

Let us have a look at the code generated by Google AdSense. It will show a responsive AD unit if put it into a HTML file.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9513614146655499"
     data-ad-slot="8955359568"
     data-ad-format="auto">
</ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Change it a little bit. We can get a template of the responsive AD Unit.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="{{ publisher_id }}"
     data-ad-slot="{{ ad_unit_id }}"
     data-ad-format="auto">
</ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Save code above as simple-adsense.html.twig, In this file, only have two variables:

  • publisher_id // Publisher ID
  • ad_unit_id // Ad Unit ID

The Publisher ID can be found at your Google AdSense account, and you can get an Ad Unit ID via creating a new Ad Unit.

In the Simple AdSense module, every Simple AdSense Block contains an Ad Unit. That's all.

Publisher ID is configured at /admin/config/simple_adsense/simpleadsense globally.

And each Simple AdSense Block has an extra input field accepting Ad Unit ID.

Generate Code using Drupal Console

$ drupal --version
Drupal Console version 0.10.1

First, generate a module

$ drupal generate:module 

We can use this command in interaction mode. But I recommend using the chain command instead to avoid input directly.

$drupal chain --file=~/.console/chain/simple_adsense.yml

The ~/.console/chain/simple_adsense.yml file contains three commands:

  • generate:module. To generate the Simple AdSense Module necessary code
  • generate:form:config. To generate a configuration form for Publisher ID
  • generate:plugin:block. To generate Simple AdSense Blocks, and each block contains an extra input field for responsive AD Unit ID
$ cd /modules/custom/simple_adsense
$ tree
├── composer.json
├── simple_adsense.info.yml
├── simple_adsense.links.menu.yml
├── simple_adsense.module
├── simple_adsense.routing.yml
└── src
    ├── Form
    │   └── SimpleAdSenseForm.php
    └── Plugin
        └── Block
            └── SimpleAdSenseBlock.php

4 directories, 7 files

Below is the content of ~/.console/chain/simple_adsense.yml file:

commands:
  - command: 'generate:module'
    options:
      module: 'Simple AdSense'
      machine-name: 'simple_adsense'
      module-path: '/modules/custom'
      description: 'Simple Google Adsense Block(s)'
      core: '8.x'
      package: 'Advertising'
      module-file: true
      composer: true
  - command: 'generate:form:config'
    options:
      module: simple_adsense
      class: 'SimpleAdSenseForm'
      form-id: 'simple_adsense_form'
      inputs:
        - name: 'publisher_id'
          type: 'textfield'
          label: 'Simple AdSense Publisher'
          options: ''
          description: 'Google AdSense Publisher Id. eg: pub-9513614146655499'
          maxlength: 64
          size: 64
          default_value: ''
          weight: 0
          fieldset: ''
      routing: true
      menu_link_gen: true
      menu_link_title: 'Simple AdSense Settings'
      menu_parent: system.admin_config_content
      menu_link_desc: 'Config Google AdSense Publisher ID'
  - command: 'generate:plugin:block'
    options:
        module: 'simple_adsense'
        class: 'SimpleAdSenseBlock'
        label: 'Simple adsense block'
        plugin-id: 'simple_adsense_block'
        theme-region: 'sidebar_first'
        inputs:
            - name: 'slot'
              type: 'textfield'
              label: 'Ad Unit Id'
              options: ''
              description: 'Unique Responsive Ad Unit Id. eg: 5556618763'
              maxlength: 64
              size: 64
              default_value: ''
              weight: 0
              fieldset: ''

I build this file by adding a --generate-chain option to those commands. Take generate:module as an example:

You should run Drupal Console commands used in this post in a Drupal installation.

$ drupal generate:module --generate-chain

 // Welcome to the Drupal module generator

 Enter the new module name:
 > Simple AdSense

 Enter the module machine name [simple_adsense]:
 > 

 Enter the module Path [/modules/custom]:
 > 

 Enter module description [My Awesome Module]:
 > Simple Google Adsense Block(s)

 Enter package name [Other]:
 > Advertising

 Enter Drupal Core version [8.x]:
 > 

 Define module as feature (yes/no) [no]:
 > 

 Do you want to add a composer.json file to your module (yes/no) [yes]:
 > 

 Would you like to add module dependencies (yes/no) [no]:
 > 


 Do you confirm generation? (yes/no) [yes]:
 > 

Generated or updated files
Site path: /Users/qiangjun/drupal8
1 - modules/custom/simple_adsense/simple_adsense.info.yml
2 - modules/custom/simple_adsense/simple_adsense.module
3 - modules/custom/simple_adsense/composer.json

Following you can find the YAML representation of your last command execution, i.e., copy in ~/.console/chain/sample.yml to execute a sequence of commands 

generate:module:
    options:
        module: 'Simple AdSense'
        machine-name: simple_adsense
        module-path: /modules/custom
        description: 'Simple Google Adsense Block(s)'
        core: 8.x
        package: Advertising
        composer: true
    arguments:
        command: generate:module

With the --generate-chain option, we get the YAML representation of our generate:module command execution.

Since Drupal Console is under heavy development, it's not stable enough. In this case, we need to have a look at the ~/.console/chain/sample.yml file and adjust a little of the yaml output manually to let chain command work properly. The file I provided is an adjusted version.

Clone the repository

git clone --branch 8.x-0.x https://git.drupal.org/project/simple_adsense.git
cd simple_adsense

Utilize Configuration System

Add two new file to our module

    new file:   install/simple_adsense.settings.yml
    new file:   schema/simple_adsense.schema.yml

Using git diff to see what I have done:

$ git diff aa5f572 07d3a46

Implements a custom theme

Add the template file to the module

    new file:   templates/simple-adsense.html.twig

Using git diff again to see what I have done

$ git diff 07d3a46 d0b5b7a

Demo/Screenshots

Publisher ID Configuration

Choose Simple AdSense Block

Configure Simple AdSense block

添加新评论

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。