JSONの画像srcを返す可変エスケープ文字列

Question

Googleタグマネージャを使用して '記事' JSONマークアップを実装し、特定のページの要素を変更するためのいくつかの変数を返します。私が返そうとしている要素の1つはイメージsrcです。

今私はCSSセレクタを使ってこれを返すDOM要素を使用しています。

<div class="field-item even"> 
<img src="THISISTHEIMAGEURL.jpg"> 
</div> 

と私は収集することにより、GTMに標的にしています：それは標的にされていることをHTML要素があるdiv.field-item.even> SRCの属性名を持つIMG This is a screenshot of how I'm targeting in GTM

右これをプレビューモードでテストすると、イメージのURLが正確に表示され、すべてが素晴らしいように見えます。

私は「悪いエスケープ文字列」というエラーとhttp://\www.mysite.com/ \ image1.jpg/\

のような両方の方法を行くスラッシュを持っている画像のURLを返していますGoogleの構造化データテストツールを使用してこれをチェック

私はいくつかの研究を行ってきましたが、この作業をするためにカスタムJavaScript変数などを使用する必要があるようです。

私はこのような何かを使用しようとしていた。

function() { 
var src = document.querySelector(‘.fielditem.even > img').src; 
} 

をその後私は、私は戻り値を必要とする私に言ってGTMにエラーが発生します。 Unfortanately、私のjavascriptのスキルはかなり貧弱であり、いくつかのより多くの研究の後、私はこのような何か試してみました：

var picture = document.getElementsByClassName(".fielditem.even"); 
var src = picture[0].firstElementChild.src; 

を私は戻り値を必要とすることを私はまだ、同じエラーを取得しています。どんな助けでも大歓迎です。

ありがとうございます！

Answer 1

-の両方の記号を忘れてしまった。代わりに

.field-item.even > img 

それが正常に動作下にスクリプトを実行すると

の

.fielditem.even > img 

、正しいクラスを問い合わせます。

var image = document.querySelector('.field-item.even > img'); 
 
var src = image.src; 
 

 
console.log(src)

<div class="field-item even"> 
 
    <img src="https://resources.risingstack.com/risingstack-logo-2017.svg"> 
 
</div>

Answer 2

ちょうどあなたの関数から値を返す：

function imgSRC() { 
    return document.querySelector('.field-item.even > img').src; 
}