あなたのブランドチームを幸せにするためにGoogle Apps


目次

  • About
  • Pre-Requisites
  • How It Works

  • Let's Do It
  • Step 1: The Core HTML File
  • Step 2: The Email Specific HTML Files - One For Each Email I Want To Send
  • Step 3: Putting It All Together
  • The End
  • アバウト


    私たちは、フォント、フォーマット、レイアウト、構造などをブランディングすることについて考えないかもしれませんが、私たちの個人的なメールでは、あなたが組織で働くならば、あなたは多分メールのためにさえ、彼らのブランドの要求から逃げることができないでしょう.そして、正当に-あなたのコミュニケーションでブランドにとどまることは、メールを含むあなたの顧客/クライアントにとって重要です.
    あなたの組織が使っているならばG-Suite 現在Google Workspaces ) その後、うまくいけば使用しているGoogle Apps Script あなたのメールコミュニケーションを自動化する.(もしそうでなければ、あなたの通信を管理するのは素晴らしい方法です).あなたはおそらく別のタイプの電子メールを持っている-別の目的のために.
    あなたの電子メールのすべては、同じルックアンドフィールをしますか?彼らはすべてあなたの組織のブランドの要件に一致しますか?コア/ベースの要素を変更する必要がある場合はどのように簡単にすべてのフォーマットを更新することですか?たぶん会社のタグラインと色のテーマが変更された-どのように迅速にすべての電子メールを更新取得することができますか?
    あなたが送るメールのすべてが同じルックアンドフィールを持っていて、維持して/更新するのが簡単であるように、私はテンプレート電子メールを作成する方法をあなたに示します.

    事前の要件

  • これを行うにはHTMLで動作する必要があります-電子メールに使用されるHTML.HTMLはこの記事の範囲外です.あなたの電子メールのためのHTMLを書くとの助けが必要な場合は、あなたのメールを作成する多くのオンラインサイトがありますWYSIWYG 関連するHTMLを吐き出します.
  • 将来の記事では、どのようにこれを行うにはGoogle DocS メールテンプレートの代わりにHTMLを台無しにする必要があります.
  • また、どのようにGoogle AppsのスクリプトのHtmlService 作品、特にHtmlTemplate . 参照 https://developers.google.com/apps-script/reference/html/html-service を参照してください.
  • 動作方法


    基本的な考え方はとても簡単です.以下のようにします.
  • 電子メールのベースを産む「ベース」HTMLファイル
  • 電子メールのための実際の特定の内容を含んでいる電子メール特有のHTMLファイルのx
  • たとえば、あなたが送るメールの以下のタイプを持っているかもしれません、そして、あなたは彼ら全員が同じルックアンドフィールを持っていることを望みます:
  • 歓迎メール
  • サポート要求自動応答
  • 請求書/請求書
  • ニュースレター
  • など
  • メールを送信する必要がある場合は、メールの特定のHTMLファイルを指定する必要があります.

    しましょう


    私のコードを見ることができますhttps://script.google.com/d/1KirtuDBLCzWMNIBYEb1MNI_tQ93f3UCyS7iuBinAf3LNtXukqvrn-F7S/edit?usp=sharing .

    Step 1 :コアHTMLファイル


    まず最初に行う必要があるのは、すべてのメールを必要とするHTML要素を持つ基本HTMLファイルを作成することです.例:base.html :
    <!DOCTYPE html>
    <html>
        <head>
            <base target="_top">
        </head>
    
        <body style="font-family: Consolas; font-size: 12px; color: blue">
            <div><h1><?= header ?></h1></div>
            <div><hr /></div>
            <div>
                <?!= content ?>
            </div>
            <div><hr /></div>
            <div>
                Thank you!<br />
                _Nacho
            </div>
        </body>
    </html>
    
    以下に例を示します:
  • スタイルのスタイル
  • 私の電子メールのすべてがそうする見出し地域
  • 実際の特定のメールコンテンツが行くコンテンツエリア
  • 私の電子メールのすべてが持つ署名領域
  • 注意:
  • base.html ファイルheading and content としてtemplate variables . これ以上.
  • For content 使用するforce-printing scriplets 我々がそれを通過しているので、HTML(電子メール特定のHTMLファイルから)を回避してください.
  • ステップ2:メールの特定のHTMLファイル


    これで、特定の電子メールのHTMLファイルのX -経線が必要です.例:email1.html :
    This is email 1.<br />
    <br />
    Today's date is: <?= data.todayDate ?>.<br />
    
    email2.html :
    This is email 1.<br />
    <br />
    Today's date is: <?= data.todayDate ?>.<br />
    
    注意:
  • これらのファイルは、それらのメールに特有の内容だけを含みます.他のすべてのHTML要素を含める必要はありませんbase.html 次の部分では、一緒に置くので注意してください.
  • 各メール固有のHTMLファイルは、関連する参照できることに注意してくださいtemplate variables .
  • メールの特定のHTMLファイルのすべては、関連するテンプレート変数を参照しますdata 変数.これは、テンプレートを組み合わせてメールを送信するときに、テンプレート変数が必要なテンプレートがわからないためです.したがって、代わりに、我々は下にすべての特定のメールテンプレート変数を通過しますdata . これは以下の意味をなすでしょう.
  • ステップ3:すべてを一緒に置く


    現在、唯一のものはすべてを一緒に置くことです.我々は電子メールを送信したいときに呼び出すことができるヘルパー機能を使用するつもりです.ヘルパー機能を一緒にメールを送信し、それを送信します.
    /**
     * send a templated email
     * 
     * @param {Object} data - configuration options
     * @param {string} data.to - recipient's email address
     * @param {string} data.subject - the email subject
     * @param {string} data.header - the header of the email body
     * @param {string} data.emailTemplate - the name of the email file we want to send
     * @param {string} data.emailData - any data we want to pass down to the email body
     */
    function _sendTemplatedEmail_(data)
    {
        // first, lets get the generated content of the specific email we want to send
        var specificEmail = HtmlService.createTemplateFromFile(data.emailTemplate);
    
        // we need to send the data relevnat to this specific email
        specificEmail.data = data.emailData;
    
        // next we need to get the base.html file and put it all together
        var baseEmail = HtmlService.createTemplateFromFile("base");
    
        // send the header (used in base.html)
        baseEmail.header = data.header;
    
        // send the content for this specific email
        // we need to evaulate it and get the HTML content
        baseEmail.content = specificEmail.evaluate().getContent();
    
        // now we can send the email
        GmailApp.sendEmail(data.to, data.subject, "", {
            // for the emial we need the evaulated HTML content
            "htmlBody": baseEmail.evaluate().getContent()
        })
    }
    
    そしてそれです.以下のようにテストできます:
    function testIt()
    {
        // lets send email1
        _sendTemplatedEmail_({
            "to": Session.getActiveUser().getEmail(),
    
            // the subject we want for this email
            "subject": "testing - email 1",
    
            // the header we want for this email
            // this will go in the header area of base.html
            "header": "this is a test of email 1",
    
            // the email specific HTML file: email1.html
            "emailTemplate": "email1",
    
            // the data relevant to email1.htlm
            "emailData": {"todayDate": Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-mm-dd")}
        });
    
        // lets send email2
        _sendTemplatedEmail_({
            "to": Session.getActiveUser().getEmail(),
            "subject": "testing - email 2",
            "header": "this is a test of email 2",
            "emailTemplate": "email2",
    
            // notice we are sending different data
            // because email2.html expects different template variables
            "emailData": {"randomNumber": Math.floor((Math.random() * 100) + 1)}
        });
    }
    
    つのメールを送信するbase.html , しかし、独自の特定のコンテンツで:
    テスト-メール1 :

    テスト-メール2

    終わり


    今、あなたは多くの電子メールの特定のHTMLファイルを必要とするすべてのそれらを使用することができますbase.html それで、彼らはすべて同じルックアンドフィールを持ちます.何かを変更する必要があるときは、スタイル、署名、何かを更新する必要がありますbase.html そして、あなたは完了しました.
    私はあなたがこの記事を参考に願っています.ご質問、懸念、フィードバック、または何かとコメントを残してください.あなたの考えを聞くのが大好きだ!