【AMP】QUERY_PARAMを使ってdocument内にあるaタグのhref値をurl.param次第で動的に生成する方法
How to dynamically generate the href value of a tag in document using QUERY_PARAM depending on url.param
お疲れ様です。
スイーツはお好きですか？と言われて
スイーツは好きです！甘党です！
と答えたら
かき氷屋さんでした
「かき氷はスイーツか！？？？」
と思った森田です
今回既存のLPをAMPに移行するお仕事がありまして
その中で
Js-in-AMPの議論はあるものの、
未だ使えない、
パラメータの扱いがあまり調べても出てこなかったのでここに記載します。
こちらは表題のことが実装されているサンプルページです
Please visit the link below.
add url parameters of "data=hogehoge"
push link and then confirm url that state parameters "data=hogehoge"
Also be sure to empty if you do not pass parameters
想定は、どこかの広告で叩かれた上記のAMPページ遷移時、
パラメータが付与されていた場合、documentのページ内に設置してあるリンク先(aタグのhref)にそれをつけてます
ドキュメントでいうと
こちらでした
なかなか見当たりませんでした。
確認方法
上記のurlでリンクを押すと遷移先のページにはパラメータが引き継がれません。
?data=
となるはずです。(残っているのは気持ち悪いですけど。。これすら取り除く方法を確認中)
次に
上記urlに?data=fb
をつけてリンク先に遷移してください
ulrに?dat=fbが引き継がれていることが確認できます
AMPページに記述したコード
ここに行き着くまでに調べた記事
・サーバサイドでレンダリングする
Springの例(https://arakan-pgm-ai.hatenablog.com/entry/2018/03/13/060000)
・urlパラメータを参照してサーバからクッキーを渡してもらいそこを参照したらいけるかも？？(未確認)
・こちらは生成されたAMPページのstateを参照してイベントにより変更するというもの。
ただこのstateの値を遷移時に、動的に生成して欲しいんだよなぁと思い、、
で、windowやdocumentにアクセスできないのでこれは無理っぽかった
https://www.ampproject.org/docs/reference/components/amp-bind#white-listed-functions
・アナリティクスor GTMで計測するように変更
https://ampbyexample.com/components/amp-analytics/
と調べていましたがこのissuesを見つけて一旦やりたかったことは解決しました
https://github.com/ampproject/amphtml/issues/4078
またー