【アドテク】ウェブサイトに画像ポップアップをGoogleタグマネージャー経由で設置する – かずきち。の日記

2025年5月19日

0

ウェブサイトに自在にポップアップを表示させる

昔のホームページはペラペラで文字や画像が書いてあるだけでした。
しかし、最近のウェブサイトはユーザの動きによってアクションが変わる時代になってきました。

テレビなどの広告はマス広告と言われ、まずは大量の人にリーチする方法です。
一方、ターゲッティング広告というのは検索履歴や・閲覧履歴に基づいて、広告を出します。
このように広告成果を向上させるテクニックのことを「アドテク」と言います。

アドテクというのはアドテクノロジーの略で、想像通り広告に関するテクノロジーのことです。
Google/電通などは広告をいかに顧客にリーチさせるかを考えています。
ということはウェブサイトに仕掛けを作ることになります。
それはそうですよね？
特殊な広告を表示するためにはウェブサイトに何らかの仕掛けを作らないといけません。

ウェブサイトにはレンダリングの順番が決まっています

これは一般的なウェブサイトが表示されるまでの順番を表しています。
利用者がウェブサイトを見るときはリクエストをサーバに投げて、HTMLの構造などを解析して、サイトを表示します。

kazukichi0914.hatenablog.com

HTMLの解析処理を並列処理させることでウェブサイトを高速化しています。
最近のホームページはさくさく動くと思いませんか？
YouTubeやNetFlixと言った動画が自宅で見られるなんて思わなかったはずです。
大昔のウェブは文字を一つ転送するだけでも大事でした。

回線速度が早くなっただけじゃ？

よくインターネットをしていると「回線が重い」のような表現があります。
これは利用者側の回線が重たいことですが、一方でウェブ制作者側にも高速でウェブサイトを提供する責任があります。

マクドナルドで注文したら、ハンバーガーが出てくるまで１時間とかは待てないわけです。
またウェブサイトも同様で、サイトが閲覧可能になるまで１分かかったらサイトを離脱します。

飲食店がお客を怒らせないために、前菜、スープなどで時間稼ぎしてる間にメイン料理を作るように
ウェブサイトも訪問者がページの最初を読んでいる間に、裏では一生懸命ウェブサイトを表示する準備をしています。

このウェブサイトには右下にAmazonのタイムセールバナーが表示されると思います

しかしこのタグはウェブサイトに並列処理させることで高速表示を実現しています。
ウェブサイトにこのような画像を表示させるためには、何かを表示するスペースを作らなくてはいけません。
div要素というのがそのHTML上で言うスペースになります。

!function(html){
 var 
   imageURL   = 'https://alpharotary.com/wp-content/uploads/2017/07/c87d62f29612e1811e386d35fc5a69ad.gif', 
   spImageURL = 'https://alpharotary.com/wp-content/uploads/2017/07/c87d62f29612e1811e386d35fc5a69ad.gif', 
   linkURL    = 'https://www.amazon.co.jp/gp/goldbox?tag=kazukichi0908-22&ref=pd_sl_zr0p5ggfb_e&adgrpid=69116959596&hvpone=&hvptwo=&hvadid=611267631090&hvpos=&hvnetw=g&hvrand=13222876917982664040&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1028853&hvtargid=kwd-316030462290&hydadcr=16617_13490483&mcid=21a4313aeca13efdbde3769b06e34b31', 
   position   = 'br',
   breakpoint = 767, 
   color      = '#ff99cc',
   prefix     = 'optimize';
 var e = document.createElement('div')
 if ( !imageURL || !linkURL || !position || !prefix ) return false;
 if ( !/relative|absolute|fixed/.test( document.body.style ) ) document.body.style.position = 'relative';
 e.insertAdjacentHTML('afterbegin',html.replace( /PREFIX/g, prefix ).replace( /PCIMAGEURL/, imageURL ).replace( /SPIMAGEURL/, spImageURL ).replace( /LINKURL/, linkURL ).replace( /BREAKPOINT/, breakpoint+'' ).replace( /BUTTONCOLOR/, color ).replace( /POSITIONSTYLE/, position.split('').reduce(function(a,c){ return a + ( c=='t' ? 'top' : c=='b' ? 'bottom' : c=='r' ? 'right' : c=='l' ? 'left' : '' ) + ':20px;';},'')))
 e=e.firstChild;e.querySelector('.'+prefix+'-close').addEventListener('click',function(){e.style.display='none'});
 document.body.appendChild(e)
}(
'
 
 .PREFIX-origin{position:fixed;POSITIONSTYLE z-index:999999;}
 .PREFIX-banner{max-width:200px;}
 .PREFIX-banner img{max-width:100%;}
 .PREFIX-close{padding:10px;font-size:10px;line-height:1;letter-spacing:1;display:block;position:absolute;right:-10px;top:-10px;background:BUTTONCOLOR;color:white;border-radius:15px;cursor:pointer}
 .PREFIX-pc{display:inline;}
 .PREFIX-sp{display:none;}
 @media(max-width:BREAKPOINTpx){
   .PREFIX-origin {
     top: auto; left: auto; right: auto; bottom: auto;
     width: 90vw; bottom: 5vw; left: 5vw;
   }
   .PREFIX-banner{ text-align: center; }
   .PREFIX-banner img{max-width:100%;}
   .PREFIX-pc{display:none;}
   .PREFIX-sp{display:block;width:100%}
 }
 
 ×]]>

‘
)
/script>

これはウェブサイトに文字を表示させるタグになります。
しかしここで問題になるのが、ウェブサイトがレンダリングされたあとに発動すると困るわけです。
レストランでデザートが食後ではなく、前菜のタイミングで出てきたらおかしいのと同様で

ウェブサイトが画面表示される前のタイミングでHTMLを横入りさせる必要があります。
なのでレンダリング前に表示されるようにします。

ここまでで画像を表示させる処理を書くことができました。
あとはレストランで言うデザートが出てくるタイミングを注文しなくてはいけません。
「デザートは食後に出してください」というオーダーは最初にしておかないと、どのタイミングでデザートを出してくるかはわからないです。

document.writeでウェブサイトへの外部書き込みを有効にする

document.writeとはレストランの例でお話すると、
オーダー時に「お体にアレルギーなどはありませんか？」と聞いてくるのが、document.writeです。

本当だったら、コースの中にそば粉を使っているけれど、提供前にそば粉を小麦粉に変更するようなもので
ウェブサイトもアクセスして、利用者の画面に表示されるまでの間に、この人は文字が大きめがいいらしいから、文字を大きくしてあげようとかのカスタマイズをするわけです。
こんなことをGoogleタグマネージャーを使うとできるわけです。

今回、このウェブサイトでは画面右下にAmazonのセール情報が出るようになっていると思います。

script>
!function(html){
 var 
   imageURL   = 'https://alpharotary.com/wp-content/uploads/2017/07/c87d62f29612e1811e386d35fc5a69ad.gif', 
   spImageURL = 'https://alpharotary.com/wp-content/uploads/2017/07/c87d62f29612e1811e386d35fc5a69ad.gif', 
   linkURL    = 'https://www.amazon.co.jp/gp/goldbox?tag=kazukichi-22&ref=pd_sl_zr0p5ggfb_e&adgrpid=69116959596&hvpone=&hvptwo=&hvadid=611267631090&hvpos=&hvnetw=g&hvrand=13222876917982664040&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1028853&hvtargid=kwd-316030462290&hydadcr=16617_13490483&mcid=21a4313aeca13efdbde3769b06e34b31', 
   position   = 'br',
   breakpoint = 767, 
   color      = '#ff99cc',
   prefix     = 'optimize';
 var e = document.createElement('div')
 if ( !imageURL || !linkURL || !position || !prefix ) return false;
 if ( !/relative|absolute|fixed/.test( document.body.style ) ) document.body.style.position = 'relative';
 e.insertAdjacentHTML('afterbegin',html.replace( /PREFIX/g, prefix ).replace( /PCIMAGEURL/, imageURL ).replace( /SPIMAGEURL/, spImageURL ).replace( /LINKURL/, linkURL ).replace( /BREAKPOINT/, breakpoint+'' ).replace( /BUTTONCOLOR/, color ).replace( /POSITIONSTYLE/, position.split('').reduce(function(a,c){ return a + ( c=='t' ? 'top' : c=='b' ? 'bottom' : c=='r' ? 'right' : c=='l' ? 'left' : '' ) + ':20px;';},'')))
 e=e.firstChild;e.querySelector('.'+prefix+'-close').addEventListener('click',function(){e.style.display='none'});
 document.body.appendChild(e)
}(
'
 
 .PREFIX-origin{position:fixed;POSITIONSTYLE z-index:999999;}
 .PREFIX-banner{max-width:200px;}
 .PREFIX-banner img{max-width:100%;}
 .PREFIX-close{padding:10px;font-size:10px;line-height:1;letter-spacing:1;display:block;position:absolute;right:-10px;top:-10px;background:BUTTONCOLOR;color:white;border-radius:15px;cursor:pointer}
 .PREFIX-pc{display:inline;}
 .PREFIX-sp{display:none;}
 @media(max-width:BREAKPOINTpx){
   .PREFIX-origin {
     top: auto; left: auto; right: auto; bottom: auto;
     width: 90vw; bottom: 5vw; left: 5vw;
   }
   .PREFIX-banner{ text-align: center; }
   .PREFIX-banner img{max-width:100%;}
   .PREFIX-pc{display:none;}
   .PREFIX-sp{display:block;width:100%}
 }
 
 ×
 
   
   
 
'
)
script>

こんなコードをウェブサイトが表示される前に流し込むことで実現しています。
ウェブサイトが表示されるまでの流れはレストランでお客さんに料理が提供されるまでのタイムラインです。
下準備〜お片付けまでをタグマネージャーは操作することができます。
興味がある人はぜひ自分のサイトにタグマネージャを設置してみましょう。

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=719729204785177&version=v17.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

続きをみる

返事を書く返事をキャンセル

あなたのコメントを入力してください。

ここにあなたの名前を入力してください

間違ったメールアドレスを入力しました。

ここにあなたのEメールアドレスを入力してください

【アドテク】ウェブサイトに画像ポップアップをGoogleタグマネージャー経由で設置する – かずきち。の日記

ウェブサイトに自在にポップアップを表示させる

ウェブサイトにはレンダリングの順番が決まっています

回線速度が早くなっただけじゃ？

このウェブサイトには右下にAmazonのタイムセールバナーが表示されると思います

document.writeでウェブサイトへの外部書き込みを有効にする

いいね:

関連

あかるとわたし ― AIと心の旅 ―㊲｜陽

人気カジノ・ギャンブル映画5選

女優キム・ゴウン、カンヌ映画祭に出席…優雅な存在感で世界を魅了

返事を書く返事をキャンセル

インモビ転職

【2025年版】事務・人事・経理など「裏方業務」に特化！オンライン転職支援【Backup Career】

【2025年版】インスタベースとは？空きスペースを手軽に借りられる新しい選択肢

【2025年版】赤ペンESとは？ES添削が“ずっと無料”の就活支援サービス！

【2025年版】発達障害・精神障害のある方の就労支援＋AIスキル習得【Neuro Dive】とは？

POPULAR POSTS

『続・続・最後から二番目の恋』子を想う母の気持ち　変わりゆく価値観の中変わらないもの

「Chrono Odyssey」，PC向けのクローズドβテストを6月中にSteamで開始。時を操る戦闘システムが見どころのオンラインアクションRPG

『ファンタジーライフｉグルグルの竜と時をぬすむ少女』先行プレイ可能なアーリーアクセスが本日より開始。ホロライブEnglish所属のIRySの実況プレイ動画も公開

POPULAR CATEGORY

ABOUT US

FOLLOW US

【アドテク】ウェブサイトに画像ポップアップをGoogleタグマネージャー経由で設置する – かずきち。の日記

ウェブサイトに自在にポップアップを表示させる

ウェブサイトにはレンダリングの順番が決まっています

回線速度が早くなっただけじゃ？

このウェブサイトには右下にAmazonのタイムセールバナーが表示されると思います

document.writeでウェブサイトへの外部書き込みを有効にする

共有:

いいね:

関連

返事を書く 返事をキャンセル

インモビ転職

POPULAR POSTS

POPULAR CATEGORY

ABOUT US

FOLLOW US

返事を書く返事をキャンセル