Slim にコンバージョンタグを埋め込む方法

Ruby on Rails のテンプレートエンジンとして良く使われている Slim。

簡易ではあるが、やや癖のある書き方に必ずしも手放しでは喜べないところもあるが、今回は Slim テンプレートに Google や Facebook, Yahoo! のコンバージョンタグ（広告の効果測定用タグ）を埋め込む方法を解説しようと思う（少しハマったので）。

本記事のまとめ

<script>〜</script> の間は javascript: に変換する。
<noscript>〜</noscript> はそのまま書く。

※ 本記事のコードは、以下のように head タグの下にインデントを一つ下げて記述してください。コード中の ID 等はすべて架空の値です。

doctype html
html
  head
    javascript:
      xxxxxx

Global site tag (Google Ads / Google Analytics)
Facebook Pixel Code（ピクセルコード）
Yahoo! プロモーション広告

Global site tag (Google Ads / Google Analytics)

埋め込みたいコード:

<!-- Global site tag (gtag.js) - Google Ads: 888888888 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-888888888"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-888888888');
</script>

Slim への埋め込みコード:

<!-- Global site tag (gtag.js) - Google Ads:888888888 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-888888888"></script>
javascript:
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-888888888');

Facebook Pixel Code（ピクセルコード）

埋め込みたいコード:

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '222222222222222');
  fbq('track', 'PageView');
  fbq('track', 'CompleteRegistration');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=222222222222222&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Slim への埋め込みコード:

<!-- Facebook Pixel Code -->
javascript:
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '222222222222222');
  fbq('track', 'PageView');
  fbq('track', 'CompleteRegistration');
<noscript>
  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=222222222222222&ev=PageView&noscript=1" />
</noscript>
<!-- End Facebook Pixel Code -->

Yahoo! プロモーション広告

埋め込みたいコード:

<!-- Yahoo Code for your Conversion Page -->
<script type="text/javascript">
    /* <![CDATA[ */
    var yahoo_conversion_id = 1000000000;
    var yahoo_conversion_label = "9sj3RO-hmIcZELjRtgoP";
    var yahoo_conversion_value = 0;
    /* ]]> */
</script>
<script type="text/javascript" src="https://s.yimg.jp/images/listing/tool/cv/conversion.js">
</script>
<noscript>
    <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt="" src="https://b31.yahoo.co.jp/pagead/conversion/1000000000/?value=0&label=9sj3RO-hmIcZELjRtgoP&guid=ON&script=0&disvt=true"/>
    </div>
</noscript>

Slim への埋め込みコード:

<!-- Yahoo Code for your Conversion Page -->
javascript:
  /* <![CDATA[ */
  var yahoo_conversion_id = 1000000000;
  var yahoo_conversion_label = "9sj3RO-hmIcZELjRtgoP";
  var yahoo_conversion_value = 0;
  /* ]]> */
<script type="text/javascript" src="https://s.yimg.jp/images/listing/tool/cv/conversion.js"></script>
<noscript>
    <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt="" src="https://b31.yahoo.co.jp/pagead/conversion/1000000000/?value=0&label=9sj3RO-hmIcZELjRtgoP&guid=ON&script=0&disvt=true"/>
    </div>
</noscript>

いかがでしょう。うまく埋め込めましたか？