Link to home
Start Free TrialLog in
Avatar of robertben
robertbenFlag for United States of America

asked on

How to add Google adsense code to a json file and have the ad display when loaded in html

Hello experts,
Can someone please tell me how to add Google adsense code to a json file so that when the content of the json file is loaded, the Google ad is displayed in the html document?  I tried creating a separate js page with the google code included and then linking to the file in the json file, but no success with that.
I guess what I am asking is how to add javascript as an array value for a name in a json object. The name/value in the json is: "adsence": "JAVASCRIPT HERE or LINK", (see below).

Below is the code and the json file.
Google code to add to page

<script type="text/javascript"><!--
google_ad_client = "ca-pub-00044202";
/* LessonContent */
google_ad_slot = "6064944836";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
        

Open in new window


json below

{
   "lessons": [
      {
         "title": "Kindergarten Art Lesson 1",
         "lesson_num": "Introduction to the Art Element Line, Part 1",
         "objective": "The students will be introduced to the art element line and use a type of line called contour lines to create a self-portrait.",
         "material": "One 12 x 18 white paper, crayons and markers",
         "procedure": "Begin by talking about how the elements of art are to art what the ABCs are to reading. Introduce artist Paul Klees contour line Drawing of himself located at the bottom of this project description. While showing his work talk about how a Contour drawing is a single line that defines the outer surface edges of a person or object. Define self-portrait as a drawing, painting or sculpture of the artist that created it. Tell the class that each of them will do a contour line drawing of themselves. Children may benefit from having a mirror to look at while they work. Begin by choosing a Crayon to use on the 12 x 18 paper. Place your crayon at one point and push it around the paper to create a drawing of yourself. Emphasize the importance of going slowly and looking carefully as you go up the arm, across the shoulder, up the neck around the outside of the hair and back down the other side in the same way. Emphasize that they draw large to fill the paper. Have them include their eyes, nose, mouth and ears. Do not push for \u001cbeautiful work but rather for accurate lines which follow the contour of the upper body. Encourage the kids to have fun as they work They may need to do this exercise several times until they get a drawing they are happy with. Encourage them to do so. Once they have completed the self-portrait, have them Color the inside of themselves. Next, take markers to trace around the outer contour placing themselves inside a rainbow of color. Fill the remainder of the paper with the rainbow color lines",
         "adsence": "",
         "conclusion": "Review the definition of contour line and self-portrait. Remind them of Paul Klee, the artist whose self-portrait we looked at. Have them share their work and display it for all to enjoy.",
         "image_title": "Artwork and Examples used in this lesson",
         "url1": "images/stories/k-images/KL1art1.jpg",
         "cap1": "Self-Portrait by Paul Klee",
         "url2": "images/stories/k-images/KL1art2.jpg",      
         "cap2": "Line Example as Self-Portrait",
         "url3": "images/stories/k-images/KL1art3.jpg",      
         "cap3": "Line Example with Colored Lines",
         "url4": "images/stories/k-images/KL1art4.jpg",      
         "cap4": "Line Example with Colored Lines"
      }

Open in new window



Thanks for your help
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

greetings,   robertben , ,   I may not be able to help, but for me, you do NOT give enough information, so that I can suggest something to help you. You show the
"lessons": [

JSON text, but I have No Idea, what or how that JSON text may be read and used, I have to GUESS that the -
"title": "Kindergarten Art Lesson 1"

would be placed in to a DHTML <title>  Tag maybe like this -
<title>Kindergarten Art Lesson 1</title>

just Maybe the JSON "objective" is the ID of a <DIV> where the text will be inserted ? ?

And I have No Hint, and can Not Guess at How the "adsence" , ,  JSON property would be read and placed in to a web page, for me that would make a huge difference in how to place Text in that to get a Javascript to work?
Avatar of robertben

ASKER

Okay, Thank you.
I will include the jQuery code for calling the json objects into the html page. I will also include the html page itself.
I hope this is not to much information. Please tell me if it looks like I am missing something. Also the the google_ad_client value is not correct. Does that matter?
Thanks for your help.

jQuery Code:


$(document).ready(function(){
    $.getJSON("js/art_k.json", function(data) {
                    var strTopLessons = data.lessons[0].title + 
                                        "<br><p>" + data.lessons[0].lesson_num + "</p>";
                    var strMidLessons = "<br><b>Objective:</b><p> " + data.lessons[0].objective + "</p>" +
                                        "<br><b>Material:</b><p> " + data.lessons[0].material + "</p>" +
                                        "<br><b>Procedure:</b><p> " + data.lessons[0].procedure + "</p>" +
                                        "<br><p>" + data.lessons[0].adsense + "</p>" +
                                        "<br><b>Conclusion:</b><p> " + data.lessons[0].conclusion + "</p>";
                    var strBotLessons = "<br><h2>" + data.lessons[0].image_title + "</h2>" +                                               
                                        "<br><img src=" + data.lessons[0].url1 + " /></b>" +
                                        "<br><b>" + data.lessons[0].cap1 + "</b>" +
                                        "<br><img src=" + data.lessons[0].url2 + " /></b>" +
                                        "<br><b>" + data.lessons[0].cap2 + "</b>" +
                                        "<br><img src=" + data.lessons[0].url3 + " /></b>" +
                                        "<br><b>" + data.lessons[0].cap3 + "</b>" +
                                        "<br><img src=" + data.lessons[0].url4 + " /></b>" +
                                        "<br><b>" + data.lessons[0].cap4 + "</b>";
                    $("#conTop").html(strTopLessons);
                    $("#conMid").html(strMidLessons);
                    $("#conBot").html(strBotLessons);
                    $("#k1").click();
        $("button.nav").click(function() {
            var index = $("button.nav").index(this);
                    var strTopLessons = data.lessons[index].title +
                                        "<br><p>" + data.lessons[index].lesson_num + "</p>";
                    var strMidLessons = "<br><b>Objective:</b><p> " + data.lessons[index].objective + "</p>" +
                                        "<br><b>Material:</b><p> " + data.lessons[index].material + "</p>" +
                                        "<br><b>Procedure:</b><p> " + data.lessons[index].procedure + "</p>" +
                                        "<br><b>adsense:</b><p> " + data.lessons[index].adsense + "</p>" +
                                        "<br><b>Conclusion:</b><p> " + data.lessons[index].conclusion + "</p>";
                    var strBotLessons = "<br><b>" + data.lessons[index].image_title + "</b>" +                                               
                                        "<br><img src=" + data.lessons[index].url1 + " /></b>" +
                                        "<br><b>" + data.lessons[index].cap1 + "</b>" +
                                        "<br><img src=" + data.lessons[index].url2 + " /></b>" +
                                        "<br><b>" + data.lessons[index].cap2 + "</b>" +
                                        "<br><img src=" + data.lessons[index].url3 + " /></b>" +
                                        "<br><b>" + data.lessons[index].cap3 + "</b>" +
                                        "<br><img src=" + data.lessons[index].url4 + " /></b>" +
                                        "<br><b>" + data.lessons[index].cap4 + "</b>";
                                        
                    $("#conTop").html(strTopLessons);
                    $("#conMid").html(strMidLessons);
                    $("#conBot").html(strBotLessons);
        });
    });
});

Open in new window


HTML page

<!DOCTYPE html>
<html>
    <head>
        <title>Arttango.com Art education for K-5 students</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="copyright" content="arttango">
        <link rel="stylesheet" href="css/cssreset.css">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <link rel="stylesheet" href="css/main2.css" />
        <link rel="stylesheet" href="css/menu.css" />
        <script src="js/jquery-1.8.1.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <script src="js/jquery.cycle.all.js"></script>      
        <script src="js/jquery.ui.core.js"></script>
        <script src="js/myJsonCode.js"></script>       
        <script src="js/myTooltip.js"></script>
</head>
<body class="wrapper">
     <div id="slideshow">
        <img src="images/bg/bg1.jpg" class="bgM"/>
        <img src="images/bg/bg2.jpg" class="bgM"/>
        <img src="images/bg/bg3.jpg" class="bgM"/>
        <img src="images/bg/bg4.jpg" class="bgM"/>
        <img src="images/bg/bg5.jpg" class="bgM"/>
        <img src="images/bg/bg6.jpg" class="bgM"/>
        <img src="images/bg/bg7.jpg" class="bgM"/>
        <img src="images/bg/bg8.jpg" class="bgM"/>
        <img src="images/bg/bg9.jpg" class="bgM"/>
    </div>
    <div id="topstrip">
        <div id="search">
            <form method="get" action="http://www.google.com/search">       
                <input type="text" name="q" size="18"  maxlength="255" value="" style="font-size: .8em;"/>
                <input id="submit" type="Submit" name="submit" value="Submit" />                            
                <input type="checkbox" name="sitesearch" value="arttango.com" checked style="display: none"/>               
            </form> 
        </div>
    </div>
    <div id="topheader">
            <div id="header">        
            <img src="images/newLogo2.png" alt="arttango logo">
            </div><!-- end #header -->
    </div>
    <!--Start Top Center Menu-->
    <div id="menu1">
        <div id="ndiv">
            <ul id="n">
            <li>Home
                <ul></ul>
            </li>
            </ul>
        </div>
        <div id="ndiv2">
            <ul id="n2">
            <li>Articles
                <ul >
                    <li><a href="arttango.com">Link</a></li>
                    <li><a href="arttango.com">Link</a></li>
                    <li><a href="arttango.com">Link</a></li>
                    <li><a href="arttango.com">Link</a></li>
                </ul>
            </li>
            </ul>            
        </div> 
        <div id="ndiv3">
            <ul id="n3">
            <li>Contact
                <ul></ul>
            </li>
            </ul>
        </div>
        <div id="ndiv4">
            <ul id="n4">
            <li>About
                <ul></ul>
            </li>
            </ul>
        </div>
        </div>
    <!--END Top Center Menu-->
    <!--START Mid main content container--> 
        <div id="container">           
        <div id="leftbar">
            <h2>Kindergarten Lessons </h2><br>
            <button id="k1" class="nav" style="background-image: url('images/k_images/k_thumbs/KL1.jpg')" title="Introduction to the Art Element Line, Part 1">K1 Lesson</button><br>                 
            <button id="k2" class="nav" style="background-image: url('images/k_images/k_thumbs/KL2.jpg')" title="Introduction to the Art Element Line, Part 1">K2 Lesson</button><br>                     
            <button id="k3" class="nav" style="background-image: url('images/k_images/k_thumbs/KL3.jpg')" title="Introduction to the Art Element Line, Part 1">K3 Lesson</button><br>
            <button id="k4" class="nav" style="background-image: url('images/k_images/k_thumbs/KL4.jpg')" title="slide down on show">K4 Lesson</button><br>                     
            <button id="k5" class="nav" style="background-image: url('images/k_images/k_thumbs/KL5.jpg')" title="slide down on show">K5 Lesson</button><br>                     
            <button id="k6" class="nav" style="background-image: url('images/k_images/k_thumbs/KL6.jpg')" title="slide down on show">K6 Lesson</button><br>
            <button id="k7" class="nav" style="background-image: url('images/k_images/k_thumbs/KL7.jpg')" title="slide down on show">K7 Lesson</button><br>                     
            <button id="k8" class="nav" style="background-image: url('images/k_images/k_thumbs/KL8.jpg')" title="slide down on show">K8 Lesson</button><br>                     
            <button id="k9" class="nav" style="background-image: url('images/k_images/k_thumbs/KL9.jpg')" title="slide down on show">K9 Lesson</button><br>
            <button id="k10" class="nav" style="background-image: url('images/k_images/k_thumbs/KL10.jpg')" title="slide down on show">K10 Lesson</button><br>
            <button id="k11" class="nav" style="background-image: url('images/k_images/k_thumbs/KL11.jpg')" title="slide down on show">K11 Lesson</button><br>                     
            <button id="k12" class="nav" style="background-image: url('images/k_images/k_thumbs/KL12.jpg')" title="slide down on show">K12 Lesson</button><br>                     
            <button id="k13" class="nav" style="background-image: url('images/k_images/k_thumbs/KL13.jpg')" title="slide down on show">K13 Lesson</button><br>
            <button id="k14" class="nav" style="background-image: url('images/k_images/k_thumbs/KL14.jpg')" title="slide down on show">K14 Lesson</button><br>                     
            <button id="k15" class="nav" style="background-image: url('images/k_images/k_thumbs/KL15.jpg')" title="slide down on show">K15 Lesson</button><br>                     
            <button id="k16" class="nav" style="background-image: url('images/k_images/k_thumbs/KL16.jpg')" title="slide down on show">K16 Lesson</button><br>
            <button id="k17" class="nav" style="background-image: url('images/k_images/k_thumbs/KL17.jpg')" title="slide down on show">K17 Lesson</button><br>                     
            <button id="k18" class="nav" style="background-image: url('images/k_images/k_thumbs/KL18.jpg')" title="slide down on show">K18 Lesson</button><br>                     
            <button id="k19" class="nav" style="background-image: url('images/k_images/k_thumbs/KL19.jpg')" title="slide down on show">K19 Lesson</button><br>
            <button id="k20" class="nav" style="background-image: url('images/k_images/k_thumbs/KL20.jpg')" title="slide down on show">K20 Lesson</button><br>
            <button id="k21" class="nav" style="background-image: url('images/k_images/k_thumbs/KL21.jpg')" title="slide down on show">K21 Lesson</button><br>                     
            <button id="k22" class="nav" style="background-image: url('images/k_images/k_thumbs/KL22.jpg')" title="slide down on show">K22 Lesson</button><br>                     
            <button id="k23" class="nav" style="background-image: url('images/k_images/k_thumbs/KL23.jpg')" title="slide down on show">K23 Lesson</button><br>
            <button id="k24" class="nav" style="background-image: url('images/k_images/k_thumbs/KL24.jpg')" title="slide down on show">K24 Lesson</button><br>                     
            <button id="k25" class="nav" style="background-image: url('images/k_images/k_thumbs/KL25.jpg')" title="slide down on show">K25 Lesson</button><br>                     
            <button id="k26" class="nav" style="background-image: url('images/k_images/k_thumbs/KL26.jpg')" title="slide down on show">K26 Lesson</button><br>
            <button id="k27" class="nav" style="background-image: url('images/k_images/k_thumbs/KL27.jpg')" title="slide down on show">K27 Lesson</button><br>                     
            <button id="k28" class="nav" style="background-image: url('images/k_images/k_thumbs/KL28.jpg')" title="slide down on show">K28 Lesson</button><br>                     
            <button id="k29" class="nav" style="background-image: url('images/k_images/k_thumbs/KL29.jpg')" title="slide down on show">K29 Lesson</button><br>
            <button id="k30" class="nav" style="background-image: url('images/k_images/k_thumbs/KL30.jpg')" title="slide down on show">K30 Lesson</button><br>  
            <br><div id="adsenseLeft" style="text-align: center">
                <!--Adsence for Left Bar Sky scraper-->
                <script type="text/javascript"><!--
                google_ad_client = "ca-pub-0004420290337889";
                /* AdLeft */
                google_ad_slot = "9919048990";
                google_ad_width = 160;
                google_ad_height = 600;
                //-->
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
        </div>
      <!-- end #sidebar1 --> 
        <div id="rightbar">
            <h2>Grade Levels Available</h2><br>
            <button id="kindergarten" class="nav" onClick="location.href = 'http://arttango.com/lessons/kindergarten.html'" style="background-image: url('images/k_images/k_thumbs/KL1.jpg')" title="Introduction to the Art Element Line, Part 1">Kindergarten</button><br>
            <button id="first" class="nav" onClick="location.href = 'http://arttango.com/lessons/first_Grade.html'" style="background-image: url('images/1_images/1_thumbs/1L1.jpg')" title="Introduction to the Art Element Line, Part 1">1st Grade</button><br>
            <button id="second" class="nav" onClick="location.href = 'http://arttango.com/lessons/second_Grade.html'" style="background-image: url('images/2_images/2_thumbs/2L1.jpg')" title="Introduction to the Art Element Line, Part 1">2nd Grade</button><br>
            <button id="third" class="nav" onClick="location.href = 'http://arttango.com/lessons/third_Grade.html'" style="background-image: url('images/3_images/3_thumbs/3L1.jpg')" title="Introduction to the Art Element Line, Part 1">3rd Grade</button><br>
            <button id="fourth" class="nav" onClick="location.href = 'http://arttango.com/lessons/fourth_Grade.html'" style="background-image: url('images/4_images/4_thumbs/4L1.jpg')" title="Introduction to the Art Element Line, Part 1">4th Grade</button><br>
            <button id="fifth" class="nav" onClick="location.href = 'http://arttango.com/lessons/fifth_Grade.html'" style="background-image: url('images/5_images/5_thumbs/5L1.jpg')" title="Introduction to the Art Element Line, Part 1">5th Grade</button><br>            
            <br><!--Adsence for Right Bar Sky scraper-->
            <div id="adsenseRt" style="text-align: center"><script type="text/javascript"><!--
                    google_ad_client = "ca-pub-0004420290337889";
                    /* AdRight2 */
                    google_ad_slot = "0474327589";
                    google_ad_width = 160;
                    google_ad_height = 600;
                    //-->
                    </script>
                    <script type="text/javascript"
                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
            </div>
                <p>There are various ways to customize the animation of a tooltip.</p>
            <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a>
            <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
            <p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
            <p>The background color on this div will only show for the length of the content. 
            If you'd like a dividing line instead, place a border on the right side of the 
            #mainContent div if the #mainContent div will always contain more content than the #sidebar2 div.</p>
            <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, 
            cursus et, fermentum ut, sapien. </p>
        </div><!-- end #sidebar2 -->
        
        <div id="mainContent">            
            <div id="conTop">
            </div>
            <div id="conMid"></div>
            <div id="adsenseCon" style="text-align: center">
                    <!--Adsense for lesson json content banner type-->
                    <script type="text/javascript"><!--
                    google_ad_client = "ca-pub-0004420290337889";
                    /* LessonContent */
                    google_ad_slot = "6064944836";
                    google_ad_width = 468;
                    google_ad_height = 60;
                    //-->
                    </script>
                    <script type="text/javascript"
                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
            </div>
            <div id="conBot"></div>
        </div><!-- end #mainContent -->
            <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
            <br class="clearfloat" />
        </div> 
    <!--END Mid main content container--> 
    <!--START #footer -->
        <div id="footer">
            <br>
            <div id="one"><a href="http://www.bergerfoundation.ch/" target="blank"><img src="images/worldArtTreasures.png"></a></div>
            <div id="two"><a href="http://wwar.com/" target="blank"><img src="images/worldWideArt.jpg"></a></div>
            <div id="three"><a href="http://www.wga.hu/index1.html" target="blank"><img src="images/webGallery.gif"></a></div>
            <div id="four"><a href="http://www.dm-art.org/" target="blank"><img src="images/dma_logo.gif"></a></div>                       
            <br><br><span>Arttango © All Rights Reserved 2012</span>
        </div><!-- end #footer -->
          
    </body>
</html>

Open in new window

I looked at your code, but I do NOT understand the code as what you ask in your question, in question you say - "json file" but there is no FILE in this, it's Jquery with a JSON return from an AJAX call.

In AJAX returns, it is best to do javascript changes-additions-redefines in the javascript as js code, and do not write the <script></script> to the div innerHTML, or a <p> in your case. But I would think, that the google adsense JS as -
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

would have already been called when the page loaded, so you probaly do NOT need to load it a second time

as to the -
<script type="text/javascript"><!--
google_ad_client = "ca-pub-00044202";
/* LessonContent */
google_ad_slot = "6064944836";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>

it would be best to get theses as Separated returned AJAX JSON in the data, and then do the javascript in the getJSON( ) return function -

google_ad_client = data.lessons[0].adsense.ary[0];
google_ad_slot = data.lessons[0].adsense.ary[1];
google_ad_width = data.lessons[0].adsense.ary[2];
google_ad_height =  data.lessons[0].adsense.ary[3];

but you will need to set up the adsense  ary[ ] array in your serverside code
Okay, I see what you are saying. I will give it a try.
Thanks
OK, , here's a web page for Javascript, that shows you how to use Javascript to reference in (use Document object) additional external js or css files as in your -
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

but there may be some operational "Bump back" if you try and load a JS file that's already there, as It may have some initialization and setup functions that run, even though they have been run before, the first time the external JS file was loaded, this can screw up some Jquery (and other JS moduals) functioning compleatly. So do not load file a second time.

but I know from experience, that adding the <sctipt> </script> in a "Ajax innerHTML change" can work, but it can also go very wrong, sometimes seemingly without explanation, especially with JQuery javascript in the script tags, as Jquery is complex and has connections to many elements that it monitors for "Events", so It's my view to always try and do javascript in the flow of the Javascript being run for the AJax return.
That is good information but I'm not sure if it will help me.
What I am trying to do is load a new google ad when the lesson number is clicked. When a new lesson loads a new ad shows up instead of the same one, since a new page is not being loaded only a new asynchronous json object. I think I said that right.
Here is a link to the test site. http://arttango.com/mob/indexJson_6.html
For now I only have Kindergarten 1, 2 and 3 lessons setup and loading properly.

The thing about the google ad is the
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> 

Open in new window

has to come directly after the
<script type="text/javascript"><!--
google_ad_client = "ca-pub-00044202";
/* LessonContent */
google_ad_slot = "6064944836";
google_ad_width = 468;
google_ad_height = 60;
//--> 

Open in new window

for it to work.

I tried to just load it one time in the html page in the head or body tags but it did not work. I tried several different approaches but without success. I guess I could just use a refresh tag every minute or so to change the ad. I didn't really want to do that because it is so annoying to the user.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Okay, I am good with this, Thanks.